时间戳

首页 > 解决方案 > 将带有多项选择的选项附加到简单选择中

javascript - 将带有多项选择的选项附加到简单选择中

问题描述

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

$(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>

标签： javascriptjquery

解决方案

删除除 after 更改的选项之外的所有选项disabled并#bar创建#foo新选项和appendTo() #bar.

$(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')
    });
  });
});
<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>

推荐阅读