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 ??
Share Improve this question edited Jan 7, 2014 at 12:33 Free-Minded asked Jan 7, 2014 at 12:28 Free-MindedFree-Minded 5,4306 gold badges52 silver badges100 bronze badges3 Answers
Reset to default 5I 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