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

