On page load I am trying to unhide multiple dropdowns in a div if any of the dropdowns have an optio-CodePudding

I have five hidden drop-downs in a div that are dynamically populated with an option selected if required by the data.

I need to display the drop-downs that have an option selected but not if the value is 0.

My code tried so far:

$('.sendingCriteria').each(function () {
    $(':selected', this).each(function (e) {
        let $this = $(this);
        if ($this.value() != 0) {
            $(this).css('display', 'block');
        }
    });
});

The CSS:

.timeOfDay,.dayOfWeek,.dayOfMonth,.mnthOfYr{
    display: none;
}

.freqSelectors{
    display:none;
}

The HTML:

<div >
    <div >
        <span  data-help="help5"></span>
        <div >
            <div >
                <input  type="checkbox" name="manAuto" id="manAuto" value="1" checked="checked">
            </div>
        </div>
        <div >
            <div >
                <label  for="frequency">Frequency</label>
                <select id="frequency" name="frequency"  aria-label="Select Frquency">
                    <option value="0">-- Select --</option><option value="d" selected="selected">Daily</option><option value="w">Weekly</option><option value="m">Monthly</option><option value="a">Annually</option>
                </select>
            </div>
            <div >
                <label  for="timeOfDay">Time of Day</label>
                <select id="timeOfDay" name="timeOfDay"  aria-label="Select Time">
                    <option value="0">-- Select --</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15" selected="selected">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option><option value="24">24:00</option>
                </select>
            </div>
            <div >
                <label  for="dayOfWeek">Day of the Week</label>
                <select id="dayOfWeek" name="dayOfWeek" >
                    <option value="0" selected="selected">-- Select --</option><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="7">Sunday</option><option value="9">Week Day</option><option value="10">Weekend</option>
                </select>
            </div>
            <div >
                <label  for="dayOfMonth">Day of the Month</label>
                <select id="dayOfMonth" name="dayOfMonth"  aria-label="Select Month">
                    <option value="0" selected="selected">-- Select --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">Last day</option><option value="33">First Monday</option><option value="34">First Tuesday</option><option value="35">First Wednesday</option><option value="36">First Thurday</option><option value="37">First Friday</option><option value="38">First Saturday</option><option value="39">First Sunday</option>
                </select>
            </div>
            <div >
                <label  for="dmnthOfYr">Month of the Year</label>
                <select id="dmnthOfYr" name="dmnthOfYr" >
                    <option value="0" selected="selected">-- Select --</option><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>
                </select>
            </div>
        </div>
    </div>
    <div  style="display: none;">Choose the frequency for generating this notificaton</div>
</div>

CodePudding user response：

As I understand it, you're trying to show/hide individual select elements, but your CSS hides div.freqSelectors which contains all of them. That means showing an individual select will have no effect, because the parent div is still hidden. So let's remove that CSS.

Next, your code is trying to iterate over $(':selected', this). But in this context, the this you reference is .sendingCriteria, which is a div. That will have no selected elements, so that will never match anything.

Instead, let's keep it simple - just iterate over each select in this container. We can find those using .find(), which will search down the DOM for matching elements.

We test each value, same as your code, but since it is the div containing the select that is hidden, we need to target that to unhide it, not the select itself. We can use .closest() to do that, it will search back up the DOM to find the closest matching element.

Note your code is iterating over every .sendingCriteria on the page. Are there really more than 1? If not, you can remove that entire loop, and just find the selects inside that element, like:

let $selects = $('.sendingCriteria').find('select');

Working snippet below (with much simplified HTML - we can demonstrate the functionality with a minimal subset of the HTML you included).

$('.sendingCriteria').each(function () {
    let $selects = $(this).find('select');
    $selects.each(function() {
        if ($(this).val() != 0) {
            $(this).closest('div').css('display', 'block');
        }
    });
});

.timeOfDay,.dayOfWeek,.dayOfMonth,.mnthOfYr{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <div >
            <label  for="frequency">Frequency</label>
            <select id="frequency" name="frequency"  aria-label="Select Frquency">
                <option value="0">-- Select --</option>
                <option value="d" selected="selected">Daily</option>
                <option value="w">Weekly</option>
                <option value="m">Monthly</option>
                <option value="a">Annually</option>
            </select>
        </div>
        <div >
            <label  for="timeOfDay">Time of Day</label>
            <select id="timeOfDay" name="timeOfDay"  aria-label="Select Time">
                <option value="0">-- Select --</option>
                <option value="14">14:00</option>
                <option value="15" selected="selected">15:00</option>
                <option value="16">16:00</option>
            </select>
        </div>
        <div >
            <label  for="dayOfWeek">Day of the Week</label>
            <select id="dayOfWeek" name="dayOfWeek" >
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Monday</option>
                <option value="2">Tuesday</option>
            </select>
        </div>
    </div>
</div>