页面加载时如何显示div中选中值非0的隐藏下拉框？

我有五个包含下拉框的div，初始状态都是隐藏的。这些下拉框会根据数据动态选中对应选项，我需要显示那些选中选项值不为0的下拉框所在的div，选中值为0的则保持隐藏。

我尝试的代码如下：

尝试的JavaScript代码 #

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

对应的CSS #

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

.freqSelectors{
    display:none;
}

对应的HTML #

<div class="sendingCriteria">
    <div class="clearfix">
        <span class="bi bi-question-circle-fill" data-help="help5"></span>
        <div class="manualAuto">
            <div class="form-check form-switch manAuto">
                <input class="form-check-input" type="checkbox" name="manAuto" id="manAuto" value="1" checked="checked">
            </div>
        </div>
        <div class="freqSelectors">
            <div class="freq">
                <label class="form-label" for="frequency">Frequency</label>
                <select id="frequency" name="frequency" class="form-select" 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 class="timeOfDay Daily Weekly Monthly Annually">
                <label class="form-label" for="timeOfDay">Time of Day</label>
                <select id="timeOfDay" name="timeOfDay" class="form-select" 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 class="dayOfWeek Weekly Annually">
                <label class="form-label" for="dayOfWeek">Day of the Week</label>
                <select id="dayOfWeek" name="dayOfWeek" class="form-select">
                    <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 class="dayOfMonth Monthly Annually">
                <label class="form-label" for="dayOfMonth">Day of the Month</label>
                <select id="dayOfMonth" name="dayOfMonth" class="form-select" 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 class="mnthOfYr Annually">
                <label class="form-label" for="dmnthOfYr">Month of the Year</label>
                <select id="dmnthOfYr" name="dmnthOfYr" class="form-select">
                    <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 class="help help5" style="display: none;">Choose the frequency for generating this notificaton</div>
</div>

你原来的代码存在几个关键问题：

1. 错误操作了<option>元素的显示：你要控制的是包含下拉框的父div（比如.timeOfDay），而不是选中的<option>本身；
2. jQuery获取元素值应该用val()方法，而不是原生的value()；
3. .freqSelectors默认是隐藏的，需要先显示它，否则里面的子元素即使设置了display:block也看不到；
4. 遍历逻辑不合理：应该遍历每个目标下拉框所在的div，而不是遍历所有选中的option。

修正后的代码如下：

修正后的JavaScript代码 #

// 先显示下拉框容器
$('.freqSelectors').show();

// 遍历需要控制显示的下拉框父div
$('.timeOfDay, .dayOfWeek, .dayOfMonth, .mnthOfYr').each(function() {
    // 获取当前div下的select元素
    const $select = $(this).find('select');
    // 判断选中值是否不为0
    if ($select.val() !== '0') {
        $(this).show();
    } else {
        $(this).hide(); // 确保值为0时保持隐藏
    }
});

补充说明 #

• 如果需要联动frequency下拉框的选择（比如选Daily时只显示Time of Day，选Weekly时显示Time of Day和Day of Week等），可以给frequency添加change事件监听，重复执行上述逻辑即可；
• 用show()和hide()比直接设置css('display', ...)更符合jQuery的最佳实践，也会保留元素原本的display属性（比如block、inline-block等）。

内容的提问来源于stack exchange，提问作者droidstack