Question

当我从第一个选择框（Animal＆amp; Bird）中选择多个字段时，第二个选择框显示我选择的第一个字段。

如果我从第一个选择框中选择并且在第二个选择框中得到正确的输出，它可以正常工作。

但是，当我在第一个选择框中选择多个字段时，“第二个选择”框上的输出不会显示基于第一个选择框的所有输出。

以下是我的代码请帮帮我：

$("#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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="select1" id="select1" size="4" multiple>
  <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" size="4" multiple>
  <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>

Answer 1

您可以调整filter()函数，使用此调整返回id数组中的值的选项：

var options = $(this).data('options').filter(
  function () {
    return $.inArray(this.value, id) > -1;
});

Fiddle，以供参考：http://api.jquery.com/jquery.inarray/

＆＃13;

$("#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(

    function() {
      return $.inArray(this.value, id) > -1;
    });
  $('#select2').html(options);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select1" id="select1" size="4" multiple>
  <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" size="4" multiple>
  <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>

＆＃13;

使用jQuery根据第一个选择列表选项显示第二个字段

1 个答案: