使用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>