javascript - 下拉值隐藏显示

Question

我有 2 个下拉菜单，这是 fiddle ，

https://jsfiddle.net/oqsf7gjq/1/

<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select> 

当用户从“ddlOption”下拉列表中选择"is"时，我只想显示下拉列表“ddlCar”的 2 个值(萨博和奥迪)，当用户选择“否”时，我想查看“的所有值” ddlCar”下拉菜单。

请向我建议 Jquery 代码的任何可能性。谢谢!

Answer 1

<强> jsFiddle example

$("#ddlOption").change(function() {
    $("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});

$("#ddlOption").change(function() {
  $("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
  <option value="">- Select an option -</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
  <option value="">- Please select a name -</option>
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Mercedes</option>
  <option value="4">Audi</option>
</select>

通过检查第一个选择的 bool 值 (this.value==="2") 来切换所需的 option 元素

此外，重置为 .val("") 以确保第二个选择值已从可能之前的更改中正确清除。