Question

当我使用jQuery从另一个<select>中选择一个或多个值时，我正在尝试更新<select multiple>元素。这是我的多个select：

<select class="form-control" multiple>
    <option value="1">company 1</option>
    <option value="2">company 2</option>
    <option value="3">company 3</option>
    <option value="4">company 4</option>
</select>

Answer 1

我希望这就是你要找的东西，

$('select#first').change(function() {
  $("select#second option:not(:first-child)").remove();
  $(this).find("option:selected").each(function() {
    $("select#second").append($(this).clone());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="first" class="form-control" multiple>
  <option value="1">company 1</option>
  <option value="2">company 2</option>
  <option value="3">company 3</option>
  <option value="4">company 4</option>
</select>
<select name="second" id="second">
  <option value=''>Select 2</select>
</select>

Answer 2

检查此脚本https://jsfiddle.net/gpb5wx8h/5/

<强> Jquery的：

function chooseItems(item, placeholder){
        $(item).change(function() {
          var item = $(this);

          console.log(typeof(item.val()));
          if(typeof item.val() == 'object'){
            $.each(item.val(), function(i,v){
              var selectedItem = item.find('option[value="'+ v +'"]'),
                  selectedText = selectedItem.text();

              selectedItem.detach();
              $(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')

            })
          }
      })
 }
$(document).ready(function() {
   chooseItems('.choose-role','.placeholder-role');
   chooseItems('.placeholder-role','.choose-role');
})

<强> HTML：

<select class="form-control choose-role" multiple>
    <option value="1">company 1</option>
    <option value="2">company 2</option>
    <option value="3">company 3</option>
    <option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>

Answer 3

如果要通过从服务器端获取有关多个选择框中所选值的数据来更新选择选项，则可以执行ajax操作并将结果插入另一个要更新的选择框。

使用jquery更新<select>的列表</select>

3 个答案: