使用jQuery選擇另一個選擇框的空值時，如何重置選擇框？

Question

我有兩個選擇框。 每次使用jquery在第一個選擇框選擇一個空值時，如何重置第二個選擇框？ 這是代碼：

 if( $('#regionId').val() ) { $('#cityId').val() } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="regionId" id="regionId" aria-invalid="false" class="valid"> <option value="">Select a region...</option> <option selected="selected" value="4">California</option> <option value="3">New York</option> </select> <select name="cityId" id="cityId" aria-invalid="true" class="valid"> <option value="">Select a city...</option> <option selected="selected" value="5">Los Angeles</option> <option value="6">Miami</option> <option value="7" >New Jersey</option> </select> 

Answer 1

使用此代碼可在區域為空時使您的城市下拉列表為空。

 function update(elem){ if($(elem).val() == ""){ $("#cityId").val("").change(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="regionId" id="regionId" aria-invalid="false" class="valid" onchange="update(this)"> <option value="">Select a region...</option> <option selected="selected" value="4">California</option> <option value="3">New York</option> </select> <select name="cityId" id="cityId" aria-invalid="true" class="valid"> <option value="">Select a city...</option> <option selected="selected" value="5">Los Angeles</option> <option value="6">Miami</option> <option value="7" >New Jersey</option> </select> 

Answer 2

您需要添加事件處理程序來更改#regionId控件...

$(function() {
  $("#regionId").on("click", function() {
    ...
  });
});

然后，您需要檢查該值以查看其是否為空...，如果是，則需要將空值設置為#cityId ...

 $(function() { $("#regionId").on("click", function() { if($(this).val() == "") { $("#cityId").val("") } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="regionId" id="regionId" aria-invalid="false" class="valid"> <option value="">Select a region...</option> <option selected="selected" value="4">California</option> <option value="3">New York</option> </select> <select name="cityId" id="cityId" aria-invalid="true" class="valid"> <option value="">Select a city...</option> <option selected="selected" value="5">Los Angeles</option> <option value="6">Miami</option> <option value="7" >New Jersey</option> </select>