两个select之间option的互相添加操作(jquery实现)

咫尺天涯734

咫尺天涯734

2016-02-19 14:38

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享两个select之间option的互相添加操作(jquery实现)的教程,热爱PS的朋友们快点看过来吧!

打包下载

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现.
插件源代码(listtolist.js):

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)代码如下:
/**
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()+"]))"));
});
}
};

展开更多 50%)
分享

猜你喜欢

两个select之间option的互相添加操作(jquery实现)

Web开发
两个select之间option的互相添加操作(jquery实现)

jQuery select的操作实现代码

Web开发
jQuery select的操作实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery select操作的日期联动实现代码

Web开发
jquery select操作的日期联动实现代码

Jquery操作radio,checkbox,select表单操作实现代码

Web开发
Jquery操作radio,checkbox,select表单操作实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery text,radio,checkbox,select操作实现代码

Web开发
jquery text,radio,checkbox,select操作实现代码

两个窗体之间传值

电脑网络
两个窗体之间传值

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

让你受益无穷的Word实用小技巧八则

让你受益无穷的Word实用小技巧八则

基于JQuery框架的AJAX实例代码

基于JQuery框架的AJAX实例代码
下拉加载更多内容 ↓