jquery - 当我使用 jquery 选择另一个选择框的第一个选项时，如何清除/重置选择框选项？

Question

每次选择另一个选择框的第一个选项时，我都想重置选择框的值。正如您在下面的代码中看到的那样，我使用了 2 个选择框。第一个包含一些日期，第二个选择框包含一些小时。当我选择日期选择框的第一个选项时，我需要重置第二个选择框的值。我不知道我哪里出错了。

$( document ).on( "change", ".date_list", function() {
if ( $('select[name=d_date]')[0].selectedIndex === 0 )
{
$("#d_time").val();
alert('HOLLA');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<select class="date_list" name="d_date" id="d_date">
<option value="2020-02-19">Wednesday 19 February</option>
<option value="2020-02-20">Thursday 20 February</option>
<option value="2020-02-21">Friday 21 February</option>
<option value="2020-02-24">Monday 24 February</option>
<option value="2020-02-25">Tuesday 25 February</option>
<option value="2020-02-26">Wednesday 26 February</option>
</select>

<select class="time_list" name="d_time" id="d_time"><option value="9:56:00">09:56</option><option value="10:56:00">10:56</option><option value="11:56:00">11:56</option><option value="12:56:00">12:56</option><option value="13:56:00">13:56</option><option value="14:56:00">14:56</option><option value="15:56:00">15:56</option><option value="16:56:00">16:56</option><option value="17:56:00">17:56</option><option value="18:56:00">18:56</option><option value="19:56:00">19:56</option><option value="20:56:00">20:56</option><option value="21:56:00">21:56</option></select>

标签： jqueryhtml

Answer 1

只设置一个空字符串$("#d_time").val(""); 强烈建议在选择框中添加一个空选项。

$( document ).on( "change", ".date_list", function() {
if ( $('select[name=d_date]')[0].selectedIndex === 0 )
{
$("#d_time").val("");

}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<select class="date_list" name="d_date" id="d_date">
<option value="2020-02-19">Wednesday 19 February</option>
<option value="2020-02-20">Thursday 20 February</option>
<option value="2020-02-21">Friday 21 February</option>
<option value="2020-02-24">Monday 24 February</option>
<option value="2020-02-25">Tuesday 25 February</option>
<option value="2020-02-26">Wednesday 26 February</option>
</select>

<select class="time_list" name="d_time" id="d_time"><option value="9:56:00">09:56</option><option value="10:56:00">10:56</option><option value="11:56:00">11:56</option><option value="12:56:00">12:56</option><option value="13:56:00">13:56</option><option value="14:56:00">14:56</option><option value="15:56:00">15:56</option><option value="16:56:00">16:56</option><option value="17:56:00">17:56</option><option value="18:56:00">18:56</option><option value="19:56:00">19:56</option><option value="20:56:00">20:56</option><option value="21:56:00">21:56</option></select>