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

Question

我有两个选择：

<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() {

  if ($(this).data('options') === undefined) {

    /*Taking an array of all options-2 and kind of embedding it on the select1*/

    $(this).data('options', $('#select2 option').clone());

  }

  var id = $(this).val();

  var options = $(this).data('options').filter('[value=' + id + ']');

  $('#select2').html(options);

});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<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 data（）存储数据

我猜想隐藏元素在跨浏览器（2012）中不起作用，我自己没有对其进行测试。