jQuery Moving Items from one list to another based on the combobox selection

Question

I have two combobox one with all available Countries name and other is empty like:

Countries

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

Empty

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

Now if I select any country from Countries list it should move to Empty list but with selected attribute and exact value some thing if I select three countries from Countries list result should be:

Countries

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

Empty

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

and similarly if I clicked on any country from my new country list (named Empty ) then the selected country should move back to available countries list with un-selected attribute and exact value like Countries Afghanistan Algeria

I follow Jquery - Moving Items from one list to another based on the combobox selection it is very nice piece of code but how to make all values selected which are moving in targetCars? with selected attribute and vise versa?

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

First, why your are using [] in your control ids? you can move Items from one list to another using this,

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

for more on operation on select elements Manipulating Select options

Answer 3

Here goes the html code!

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

and my javascript code.

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

Make sure you added jquery.js file to your project!