兩個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 EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。2011-09-09Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多,由于實現(xiàn)起來比較麻煩,所以自己寫了一個,下面為大家分享下具體的算法及實現(xiàn)代碼,感興趣的朋友可以參考下2013-10-10easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法
下面小編就為大家?guī)硪黄P(guān)于兩個jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯的,現(xiàn)在就分享 給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09