I have two multi select list. I am trying to implementing such functionality where user can Add or Remove item from left side list to right side list. here is my code

html --

<select id="distriList" name="distriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
</select>
<a href="javascript:void(0);" id="addPop">Add</a>
<a href="javascript:void(0);" id="removePop">Remove</a>
<select id="selectDistriList" name="selectDistriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
</select>

and JS -

$('#addPop').click(function() {
    if ($('#distriList option:selected').val() != null) {
         $('#distriList option:selected').remove().appendTo('#selectDistriList');
         $("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");
         $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 } else {
    alert("Before add please select any position.");
                                        }
});

$('#removePop').click(function() {
       if ($('#selectDistriList option:selected').val() != null) {
             $('#selectDistriList option:selected').remove().appendTo('#distriList');
             $("#selectDistriList").attr('selectedIndex',  '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').addAttr("selected");
} else {
   alert("Before remove please select any position.");
}
});

Check JSFiddle also

Everything is working fine, but my problem is when i am selecting any item from left side and add it to right side, the added item is not getting selected in right side list. Same problem i am facing while removing also.

Expected Result : When ever add/remove perform, the added/removed item should be selected in list

Any help ??

I have two multi select list. I am trying to implementing such functionality where user can Add or Remove item from left side list to right side list. here is my code

html --

<select id="distriList" name="distriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
</select>
<a href="javascript:void(0);" id="addPop">Add</a>
<a href="javascript:void(0);" id="removePop">Remove</a>
<select id="selectDistriList" name="selectDistriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;">
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="G">G</option>
        <option value="H">H</option>
</select>

and JS -

$('#addPop').click(function() {
    if ($('#distriList option:selected').val() != null) {
         $('#distriList option:selected').remove().appendTo('#selectDistriList');
         $("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");
         $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 } else {
    alert("Before add please select any position.");
                                        }
});

$('#removePop').click(function() {
       if ($('#selectDistriList option:selected').val() != null) {
             $('#selectDistriList option:selected').remove().appendTo('#distriList');
             $("#selectDistriList").attr('selectedIndex',  '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
             $("#distriList").attr('selectedIndex', '-1').addAttr("selected");
} else {
   alert("Before remove please select any position.");
}
});

Check JSFiddle also

Everything is working fine, but my problem is when i am selecting any item from left side and add it to right side, the added item is not getting selected in right side list. Same problem i am facing while removing also.

Expected Result : When ever add/remove perform, the added/removed item should be selected in list

Any help ??

• javascript
• jquery
• html

3 Answers 3

I have Identified issue and solved it. You need to maintain selection by storing it in temp variable.

Jquery code is as follow:

 $('#addPop').click(function () {
      if ($('#distriList option:selected').val() != null) {
          var tempSelect = $('#distriList option:selected').val();
          $('#distriList option:selected').remove().appendTo('#selectDistriList');
          $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#selectDistriList").val(tempSelect);
          tempSelect = '';
      } else {
          alert("Before add please select any position.");
      }
  });

  $('#removePop').click(function () {
      if ($('#selectDistriList option:selected').val() != null) {
          var tempSelect = $('#selectDistriList option:selected').val();
          $('#selectDistriList option:selected').remove().appendTo('#distriList');
          $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
          $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

          $("#distriList").val(tempSelect);
          tempSelect = '';
      } else {
          alert("Before remove please select any position.");
      }
  });

See Demo Here :

JSFiddle

I believe you must use .prop() instead of attribute 'selected'. Check it here http://api.jquery./prop/

I have modified JS fiddle check.

Code change :

$('#addPop').click(function() {
        if ($('#distriList option:selected').val() != null) {
             $('#distriList option:selected').remove().appendTo('#selectDistriList');
$("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");

            $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

        }
    else if ($('#selectDistriList option:selected').val() != null)  {                                                                        
    $('#selectDistriList option:selected').remove().appendTo('#distriList');
$("#selectDistriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");

            $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");



    }
    else {
        alert("Before add please select any position.");
                                            }
    });

$('#removePop').click(function() {
    if ($('#selectDistriList option:selected').val() != null) {
    $('#selectDistriList option:selected').remove().appendTo('#distriList');
$("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
$("#distriList").attr('selectedIndex', '-1').addAttr("selected");
                                            }
    else if($('#distriList option:selected').val() != null) {
    $('#selectDistriList option:selected').remove().appendTo('#selectDistriList');
$("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
 $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
        $("#selectDistriList").attr('selectedIndex', '-1').addAttr("selected");}    
    else {
                                                alert("Before remove please select any position.");
                                            }
                                        });

JS FIDDLE