我有兩個多選列表。我正試圖實現這樣的功能,用戶可以從左側列表中添加或刪除項目到右側列表中。這裏是我的代碼多選擇列表添加/刪除jquery中的項目問題
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>
和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.");
}
});
檢查JSFiddle也
一切工作正常,但我的問題是當我選擇任何項目從左側添加到右側,添加的項目沒有在右側列表中選擇。我也面臨同樣的問題,同時刪除。
預期結果:當過添加/刪除執行中,添加/刪除項目應該在名單
任何幫助選擇?
雅它是工作,但只有當我加入項目。刪除時,它現在不選擇 –
已編輯的答案檢查它。請參閱Jsiddle。它正在工作。 –
現在工作:)感謝兄弟 –