如何在jQuery中添加/删除下拉列表多选择列表项目

Question

我使用的是多选择下拉列表和数据库中填写的项目，如下所示，它第一次工作正常，但是基于其他下拉列表的选择，我需要删除值并添加其他值。

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

我无法修改下拉菜的值，任何人都可以帮助我吗？

我转介到下面的链接。

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

我尝试了类似以下操作：

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

Answer 1

demo链接http://www.designchemical.com/blog/index.php/jquery/create-add-remove-select-select-list-list-list-list-using-juer/

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

Answer 2

您可以使用以下代码卸载多电选择下拉列表，然后重新初始化：

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

您还可以使用以下代码重新加载：

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

请检查此处以获取更多选项。