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

Question

I want to reset the value of a select box every time I select the first option of another select box. As you can see in my code below I am using 2 select boxes. The first one contains some dates and the second select box contain some hours. I need to reset the value of the second select box when I select the first option of the dates select box. I can't figure out where I went wrong.

 $( 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>

Answer 1

just setting an empty string $("#d_time").val(""); Adding an empty option in the select box is highly recommended.

 $( 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>