更新列表<select>從另一個<select multiple>使用jquery

-1

我試圖更新<select>元素，當我從另一<select multiple>使用jQuery選擇一個或多個值。這裏是我多select：更新列表<select>從另一個<select multiple>使用jquery

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

來源

2017-04-19 Tevfik Xung

請提高您的問題。添加你試圖完成這個的代碼 –

我希望這是你在找什麼，

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

來源

2017-04-19 11:41:10

謝謝你，那種我一直在尋找的東西 –

-2

如果你想通過從服務器端有關的多個選擇框中選擇的值，那麼你可以進行AJAX操作和結果插入到另一個選擇框獲取數據更新選擇選項，這些選項將被更新。

來源

2017-04-19 11:27:24

也許你可以發佈一些代碼來顯示OP如何做到這一點？「你可以通過解決這個問題來解決這個問題」不是很有幫助 – Artless

檢查這個腳本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>

來源

2017-04-19 11:43:52

更新列表<select>從另一個<select multiple>使用jquery

回答

相關問題