使用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() {
  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数据()存储数据

我猜隐藏元素不能跨浏览器工作(2012)，我自己也没有测试过。

Answer 2

全部储存#select2变量中的选项，根据#select1，并将其设置为.html()在……里面#select2:

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $options = $select2.find( 'option' );$select1.on('change', function() {
    $select2.html($options.filter('[value="' + this.value + '"]'));}).trigger('change');

这里有把小提琴