jQuery基于组合框选择将项目从一个列表移动到另一个列表

Question

我有两个组合框，其中包含所有可用的国家/地区名称，其他组合为空，如：

国家

<select name="countryId[]" multiple="multiple" id="countryId" size="10">
    <option id="" value="1" >Afghanistan</option>
    <option id="" value="3" >Albania</option>
    <option id="" value="4" >Algeria</option>
    <option id="" value="5" >American samoa</option>
</select>

清除

<select name="mycountryId[]" multiple="multiple" id="mycountryId" size="10">
</select>

现在，如果我从“国家/地区”列表中选择任何国家/地区，它应该移至“空列表”但是已选择属性和完全值如果我从国家/地区列表结果中选择三个国家/地区应该是：

国家

<select name="countryId[]" multiple="multiple" id="countryId" size="10">
    <option id="" value="1" >Afghanistan</option>
</select>

清除

<select name="mycountryId[]" multiple="multiple" id="mycountryId" size="10">
    <option selected="selected" id="" value="3" >Albania</option>
    <option selected="selected" id="" value="4" >Algeria</option>
    <option selected="selected" id="" value="5" >American samoa</option>
</select>

同样，如果我点击新国家/地区列表中的任何国家/地区（名为清空），则所选国家/地区应返回到具有未选中属性的可用国家/地区列表确切值 喜欢 的国家         阿富汗         阿尔及利亚

我关注Jquery - Moving Items from one list to another based on the combobox selection这是非常好的代码，但是如何选择在targetCars中移动的所有值？ 选择属性，反之亦然？

Answer 1

function MoveListBoxItem(leftListBoxID, rightListBoxID, isMoveAll) {
    if (isMoveAll == true) {

        $('#' + leftListBoxID + ' option').remove().appendTo('#' + rightListBoxID).removeAttr('selected');

    }
    else {

        $('#' + leftListBoxID + ' option:selected').remove().appendTo('#' + rightListBoxID).removeAttr('selected');
    }
}

Answer 2

首先，为什么您在控件ID中使用[]？您可以使用此项目将项目从一个列表移动到另一个列表，

      $('#countryId option:selected').appendTo('#countryId');

了解有关select元素Manipulating Select options

的操作的更多信息

Answer 3

这里是html代码！

        <select multiple id="countryId">
            <option value="1">Afghanistan</option>
            <option value="2">Albania</option>
            <option value="3">Algeria</option>
            <option value="4">American samoa</option>
        </select>
        <a href="#" id="add">add &gt; &gt;</a>

        <select multiple id="mycountryId"></select>
        <a href="#" id="remove">remove &lt; &lt;</a>

和我的javascript代码。

$("#countryId").click(function(){
    $("#countryId option:selected").remove().appendTo($("#mycountryId"));
})
$("#mycountryId").click(function(){
    $("#mycountryId option:selected").remove().appendTo($("#countryId"));
})      

确保您已将jquery.js文件添加到项目中！