Question

我正在使用多个选择来填充简单的选择。我正在尝试如果我选择一个值并且它不存在附加到简单选择，如果存在不执行任何操作，但如果我取消选择选项，则从简单选择中删除它。我怎么能这样做？

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();

    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

Answer 1

在disabled更改后#bar删除除#foo之外的所有选项，并创建新选项和appendTo() #bar。

＆＃13;

$(function() {
  $(document).on('change', '#foo', function() {
    var values = $(this).val() || []; // in case you don't select anything
    $('#bar option:not(:disabled)').remove()
    values.forEach(function(val) {
      $('<option>', {
        value: val,
        text: val
      }).appendTo('#bar')
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

＆＃13;

Answer 2

每次更改时都必须清空子项，否则新的<option>将被追加，列表会变得很长。试试这个：

＆＃13;

$(function() {

  $(document).on('change', '#foo', function() {
    var values = $(this).val();
    $('#bar').empty().append('<option selected disabled>Add some from multiple</option>');
    values.forEach(function(val) {
      $('#bar option').each(function() {
        var v = $(this).val();
        if (values.indexOf(v) === -1) {
          $('#bar').append('<option value="' + val + '">' + val + '</option>');
          return false;
        }
      });
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled>Add some from multiple</option>
</select>

＆＃13;

Answer 3

您应该绑定click事件而不是change，因为如果您再次点击同一选项，则无法收听更改事件。
您可以尝试以下代码。

$(function() {
  //get onclick value
  $(document).on('click', '#foo', function() {
    let value = $(this).val();

    //get existing values in #bar
    let exist = false;
    $("#bar option").each(function(){
      if($(this).val() == value){
        exist = true;
    //remove if exist
        $(this).remove();
      }
    });
  //append if not exist
  if(!exist){
      $('#bar').append(`<option value="${value}">${value}</option>`);
}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select multiple id="foo">
  <option value="value1">value1</option>
  <option value="value2">value2</option>
</select>

<select id="bar">
  <option selected disabled value="default">Add some from multiple</option>
</select>

Answer 4

嗯，我认为你会遇到更多问题，但如果你只是想要删除一个选项，你可以做这样的事情

$("#bar option([value=" + val+ "]").remove();

将多个选择附加到简单选择的选项

4 个答案: