两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.
自己写了一个很简单的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()+"]))"));
});
}
};
测试页面(listtolist.html)
<html>
<head>
<script src="jquery.js"></script>
<script src="listtolist.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#select1").dblclick(function() {$.listTolist("select1","select2","move",false);});
$("#select2").dblclick(function() {$.listTolist("select2","select1","move",false);});
$("#moveright").click(function() {$.listTolist("select1","select2","move",false);});
$("#moverightall").click(function() {$.listTolist("select1","select2","move",true);});
$("#moveleft").click(function() {$.listTolist("select2","select1","move",false);});
$("#moveleftall").click(function() {$.listTolist("select2","select1","move",true);});
$("#select3").dblclick(function() {$.listTolist("select3","select4","append",false);});
$("#select4").dblclick(function() {$.listTolist("select4","select3","append",false);});
$("#appendright").click(function() {$.listTolist("select3","select4","append",false);});
$("#appendrightall").click(function() {$.listTolist("select3","select4","append",true);});
$("#appendleft").click(function() {$.listTolist("select4","select3","append",false);});
$("#appendleftall").click(function() {$.listTolist("select4","select3","append",true);});
$("#select5").dblclick(function() {$.list2list("select5","select6",false);});
$("#select6").dblclick(function() {$.list2list("select6","select5",false);});
$("#transright").click(function() {$.list2list("select5","select6",false);});
$("#transrightall").click(function() {$.list2list("select5","select6",true);});
$("#transleft").click(function() {$.list2list("select6","select5",false);});
$("#transleftall").click(function() {$.list2list("select6","select5",true);});
});
</script>
</head>
<body>
<form action="#" method="post">
<p>移动(move)测试:</p>
<label for="select1">select1</label>
<select id="select1" style="width:100px" size="5" multiple="true">
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
<option value="7">number 7</option>
<option value="8">number 8</option>
<option value="9">number 9</option>
<option value="10">number 10</option>
<option value="11">number 11</option>
</select>
<label for="select2">select2</label>
<select id="select2" style="width:100px" size="5" multiple="true">
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
</select>
<br />
<button id="moveright">右移</button>
<button id="moverightall">全部右移</button>
<button id="moveleft">左移</button>
<button id="moveleftall">全部左移</button>
<hr />
<p>追加(append)测试:</p>
<label for="select3">select3</label>
<select id="select3" style="width:100px" size="5" multiple="true">
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
<option value="7">number 7</option>
<option value="8">number 8</option>
<option value="9">number 9</option>
<option value="10">number 10</option>
<option value="11">number 11</option>
</select>
<label for="select4">select4</label>
<select id="select4" style="width:100px" size="5" multiple="true">
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
</select>
<br />
<button id="appendright">右移</button>
<button id="appendrightall">全部右移</button>
<button id="appendleft">左移</button>
<button id="appendleftall">全部左移</button>
<hr />
<p>list2list测试:</p>
<label for="select5">select5</label>
<select id="select5" style="width:100px" size="5" multiple="true">
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
<option value="7">number 7</option>
<option value="8">number 8</option>
<option value="9">number 9</option>
<option value="10">number 10</option>
<option value="11">number 11</option>
</select>
<label for="select6">select6</label>
<select id="select6" style="width:100px" size="5" multiple="true">
<option value="4">number 4</option>
<option value="5">number 5</option>
<option value="6">number 6</option>
</select>
<br />
<button id="transright">右移</button>
<button id="transrightall">全部右移</button>
<button id="transleft">左移</button>
<button id="transleftall">全部左移</button>
</form>
</body>
</html>
分享到:
- 2008-10-30 15:19
- 浏览 6030
- 评论(3)
- 论坛回复 / 浏览 (3 / 17161)
- 查看更多
相关推荐
使用jquery技术实现 两个select之间option的转移操作,支持全选、单选、删除操作,代码简单,功能强大,拿过来就能用哦!内附效果截图
jQuery获取Select选择的Text和Value: 代码如下: var checkText=jQuery(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text var checkValue=jQuery(“#select_id”).val(); //获取Select选择...
本文实例讲述了jquery操作select常见方法。分享给大家供大家参考,具体如下: ...经常会在页面上对其进行操作,这些操作...6. 两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况。 7
jQuery操作两个select上、下、左、右移动select option演示源码,可全部移动,也可以单个移动
两个列表都可以多选, 实现如下效果: 1、双击第一个列表中任意一个列表项,实现向下添加 2、双击第二个列表中任意一个列表项,实现删除, 2、点击按钮,实现对应功能。 Html代码 代码如下: <form name=”form1...
如下所示: <select id=isshow name=isshow style=width: 100px...以上这篇jQuery获取select选中的option的value值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用。 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器。而live事件:为当前或未来的匹配元素添加一个或多个事件处理器。 ...
一、直接上代码 ...select id=leftSelector multiple=multiple name=SmsListOnLeft style=height:100px; width:50px> <option value=0>0</option> <option value=1>1</option> <option value=2>2</option>
有个需求让两个select中option相互转换,这个作业就是给几个按钮添加click()事件接下来为大家介绍下如何在click(),change()传递参数
jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来。 我的下拉框是: ... 默认是店员,一共两个值,即店员、店长 jquery获取内容采用: var iv_level=jQuery(“#iv_level option:
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿………. 下面是三个select: 代码如下:<select name=”pWaqqqy” id=”sel_type” onchange=”...
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果...
对于这个效果,其实我发现主要在于两点:1、jquery的筛选遍历操作;2、存储省、市、区这些数据时候的格式。另外一点是如何将获取得到的数据放到select option中(即下拉框中!) 对于第一个问题的解决,其实...
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head> <... charset=gb2312″ /> <...script type=”text/javascript”
现有如下两个select 计划类别: <select id=PLANTYPE> <option value=0>-所有-</option> <option value=1>新建</option> <option value=2>续建</option> </select> 申报类型: <select id=AUDITTYPE&...
实现两个下拉框数据移动,追加 代码如下: $(‘#add’).click(function(){ var $options = $(‘#select1 option:selected’); //获取选中的项 var $remove = $options.remove(); $remove.appenTo(‘#select2’); }); ...
1、HTML代码里就只有两个SELECT标签如下: <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2、Javascript中进行...