如何添加/刪除下拉列表中的多選列表項目jQuery

Question

我正在使用多選下拉列表和填充項目從數據庫像下面，它工作正常，但基於其他下拉列表的選擇，我需要刪除值和添加其他值。

$('#PID').multiselect({ 
    columns: 1, 
    placeholder: 'Select project' 
}); 

我無法修改下拉列表的值，任何人都可以幫我嗎？

我參考了下面的鏈接。

http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/

我試過類似如下：

$("#PID").append('<option value="option5">Option ' + ++count + '</option>'); 
$("#PID").multiselect('refresh'); 

Answer 1

您可以使用下面的代碼卸載多選下拉列表，並對其進行重新初始化：

$('#PID').multiselect('unload'); 

您也可以重新加載使用下面的代碼：

$('#PID').multiselect('reload'); 

請檢查here以獲取更多選項。

Answer 2

演示鏈接http://www.designchemical.com/blog/index.php/jquery/create-add-remove-select-lists-using-jquery/

<form> 
    <fieldset> 

    <select name="selectfrom" id="select-from" multiple size="5"> 
     <option value="1">Item 1</option> 
     <option value="2">Item 2</option> 
     <option value="3">Item 3</option> 
     <option value="4">Item 4</option> 
    </select> 

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a> 
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a> 

    <select name="selectto" id="select-to" multiple size="5"> 
     <option value="5">Item 5</option> 
     <option value="6">Item 6</option> 
     <option value="7">Item 7</option> 
    </select> 

    </fieldset> 
</form> 

jQuery代碼

$(document).ready(function() { 

    $('#btn-add').click(function(){ 
     $('#select-from option:selected').each(function() { 
       $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
      $(this).remove(); 
     }); 
    }); 
    $('#btn-remove').click(function(){ 
     $('#select-to option:selected').each(function() { 
      $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
      $(this).remove(); 
     }); 
    }); 

});