使用jQuery根据第一个选择列表选项更改第二个选择列表

Question

使用jQuery根据第一个选择列表选项更改第二个选择列表

我有两个选择：

<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option></select><select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option></select>

如果我在第一个选择中选择了果树，那么如何使用jQuery呢？第二个选择只给我看水果-香蕉，苹果，橘子。如果我在第一个选择中选择鸟，第二个选择将只显示鸟-鹰，鹰。以此类推.。

我试着用这段jQuery代码来完成这个任务：

$("#select1").change(function() {
    var id = $(this).val();
    $('#select2 option[value!='+id+']').remove();});

不幸的是，它消除了几乎所有的东西，我不知道如何带回一些选择。我也读过一些关于克隆的东西，但我不知道如何在这个例子中使用它。

Answer 1

$("#select1").change(function()&nbsp;{ &nbsp;&nbsp;if&nbsp;($(this).data('options')&nbsp;===&nbsp;undefined)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*Taking&nbsp;an&nbsp;array&nbsp;of&nbsp;all&nbsp;options-2&nbsp;and&nbsp;kind&nbsp;of&nbsp;embedding&nbsp;it&nbsp;on&nbsp;the&nbsp;select1*/ &nbsp;&nbsp;&nbsp;&nbsp;$(this).data('options',&nbsp;$('#select2&nbsp;option').clone()); &nbsp;&nbsp;} &nbsp;&nbsp;var&nbsp;id&nbsp;=&nbsp;$(this).val(); &nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;$(this).data('options').filter('[value='&nbsp;+&nbsp;id&nbsp;+&nbsp;']'); &nbsp;&nbsp;$('#select2').html(options);});<script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><select&nbsp;name="select1"&nbsp;id="select1"> &nbsp;&nbsp;<option&nbsp;value="1">Fruit</option> &nbsp;&nbsp;<option&nbsp;value="2">Animal</option> &nbsp;&nbsp;<option&nbsp;value="3">Bird</option> &nbsp;&nbsp;<option&nbsp;value="4">Car</option></select><select&nbsp;name="select2"&nbsp;id="select2"> &nbsp;&nbsp;<option&nbsp;value="1">Banana</option> &nbsp;&nbsp;<option&nbsp;value="1">Apple</option> &nbsp;&nbsp;<option&nbsp;value="1">Orange</option> &nbsp;&nbsp;<option&nbsp;value="2">Wolf</option> &nbsp;&nbsp;<option&nbsp;value="2">Fox</option> &nbsp;&nbsp;<option&nbsp;value="2">Bear</option> &nbsp;&nbsp;<option&nbsp;value="3">Eagle</option> &nbsp;&nbsp;<option&nbsp;value="3">Hawk</option> &nbsp;&nbsp;<option&nbsp;value="4">BWM<option></select>使用jQuery数据()存储数据我猜隐藏元素不能跨浏览器工作(2012)，我自己也没有测试过。

Answer 2

全部储存#select2变量中的选项，根据#select1，并将其设置为.html()在……里面#select2:var&nbsp;$select1&nbsp;=&nbsp;$(&nbsp;'#select1'&nbsp;), &nbsp;&nbsp;&nbsp;&nbsp;$select2&nbsp;=&nbsp;$(&nbsp;'#select2'&nbsp;), &nbsp;&nbsp;&nbsp;&nbsp;$options&nbsp;=&nbsp;$select2.find(&nbsp;'option'&nbsp;);$select1.on('change',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$select2.html($options.filter('[value="'&nbsp;+&nbsp;this.value&nbsp;+&nbsp;'"]'));}).trigger('change');这里有把小提琴