打包下載
自己寫了一個很簡單的jquery插件,在頁面中調用其中的函數就可實現.
插件源代碼(listtolist.js):
代碼如下:
/**
fromid:源list的id.
toid:目標list的id.
moveOrAppend參數("move"或者是"append"):
move -- 源list中選中的option會刪除.源list中選中的option移動到目標list中,若目標list中已存在則該option不添加.
append -- 源list中選中的option不會刪除.源list中選中的option添加到目標list的後面,若目標list中已存在則該option不添加.
isAll參數(true或者false):是否全部移動或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
if(moveOrAppend.toLowerCase() == "move") { //移動
if(isAll == true) { //全部移動
$("#"+fromid+" option").each(function() {
//將源list中的option添加到目標list,當目標list中已有該option時不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
$("#"+fromid).empty(); //清空源list
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
//將源list中的option添加到目標list,當目標list中已有該option時不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
//目標list中已經存在的option並沒有移動,仍舊在源list中,將其清空.
if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {
$("#"+fromid).get(0)
.removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));
}
});
}
}
else if(moveOrAppend.toLowerCase() == "append") {
if(isAll == true) {
$("#"+fromid+" option").each(function() {
$("<option></option>")
.val($(this).val())
.text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
$("<option></option>")
.val($(this).val())
.text($(this).text())
.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
}
};
/**
功能大體同上("move").
不同之處在於當源list中的選中option在目標list中存在時,源list中的option不會刪除.
isAll參數(true或者false):是否全部移動或添加
*/
jQuery.list2list = function(fromid,toid,isAll) {
if(isAll == true) {
$("#"+fromid+" option").each(function() {
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
else if(isAll == false) {
$("#"+fromid+" option:selected").each(function() {
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
});
}
};