兩個select之間option的互相添加操作(jquery實現(xiàn))
更新時間:2009年11月12日 22:16:53 作者:
兩個select,將其中一個select選中的選項添加到另一個select中,或者點擊全部添加按鈕將所有的option都添加過去.
自己寫了一個很簡單的jquery插件,在頁面中調(diào)用其中的函數(shù)就可實現(xiàn).
插件源代碼(listtolist.js):
/**
fromid:源list的id.
toid:目標(biāo)list的id.
moveOrAppend參數(shù)("move"或者是"append"):
move -- 源list中選中的option會刪除.源list中選中的option移動到目標(biāo)list中,若目標(biāo)list中已存在則該option不添加.
append -- 源list中選中的option不會刪除.源list中選中的option添加到目標(biāo)list的后面,若目標(biāo)list中已存在則該option不添加.
isAll參數(shù)(true或者false):是否全部移動或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
if(moveOrAppend.toLowerCase() == "move") { //移動
if(isAll == true) { //全部移動
$("#"+fromid+" option").each(function() {
//將源list中的option添加到目標(biāo)list,當(dāng)目標(biāo)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添加到目標(biāo)list,當(dāng)目標(biāo)list中已有該option時不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
//目標(biāo)list中已經(jīng)存在的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").
不同之處在于當(dāng)源list中的選中option在目標(biāo)list中存在時,源list中的option不會刪除.
isAll參數(shù)(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()+"]))"));
});
}
};
打包下載
插件源代碼(listtolist.js):
復(fù)制代碼 代碼如下:
/**
fromid:源list的id.
toid:目標(biāo)list的id.
moveOrAppend參數(shù)("move"或者是"append"):
move -- 源list中選中的option會刪除.源list中選中的option移動到目標(biāo)list中,若目標(biāo)list中已存在則該option不添加.
append -- 源list中選中的option不會刪除.源list中選中的option添加到目標(biāo)list的后面,若目標(biāo)list中已存在則該option不添加.
isAll參數(shù)(true或者false):是否全部移動或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
if(moveOrAppend.toLowerCase() == "move") { //移動
if(isAll == true) { //全部移動
$("#"+fromid+" option").each(function() {
//將源list中的option添加到目標(biāo)list,當(dāng)目標(biāo)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添加到目標(biāo)list,當(dāng)目標(biāo)list中已有該option時不做任何操作.
$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
//目標(biāo)list中已經(jīng)存在的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").
不同之處在于當(dāng)源list中的選中option在目標(biāo)list中存在時,源list中的option不會刪除.
isAll參數(shù)(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()+"]))"));
});
}
};
打包下載
您可能感興趣的文章:
- JS & JQuery 動態(tài)添加 select option
- jquery操作select元素和option的實例代碼
- jQuery操作Select的Option上下移動及移除添加等等
- JQuery中對Select的option項的添加、刪除、取值
- 刪除select中所有option選項jquery代碼
- 淺析jQuery對select操作小結(jié)(遍歷option,操作option)
- jQuery解決下拉框select設(shè)寬度時IE 6/7/8下option超出顯示不全
- JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
- jquery操作select option 的代碼小結(jié)
- jQuery增加、刪除及修改select option的方法
相關(guān)文章
Jquery如何使用animation動畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動畫效果改變背景色,需要的朋友可以參考下2020-07-07
jquery+css實現(xiàn)的紅色線條橫向二級菜單效果
這篇文章主要介紹了jquery+css實現(xiàn)的紅色線條橫向二級菜單效果,界面美觀大方,簡潔實用,通過jquery遍歷及切換頁面元素實現(xiàn)這一功能,需要的朋友可以參考下2015-08-08
如何使用jquery動態(tài)加載js,css文件實現(xiàn)代碼
在jquery中要實現(xiàn)動態(tài)加載js文件的方法有很多種,最簡單的我們可以直接利用$.include()方法來實現(xiàn),感興趣的朋友可以參考下哈2013-04-04

