`
sdcyst
  • 浏览: 59010 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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

jQueryJavaScriptIEFirefox 
阅读更多

两个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>
 
分享到：
| 为输入控件设置提示文本(jquery实现)
评论
3 楼 sdcyst 2009-02-20  
tianhaoleng 写道
同样用jquery，实现同样的功能，我这样…… 

function transferOption(sourceId,targetId){
var target = $("#"+targetId);
target.append($("option[@selected]", $("#"+sourceId)));
}


sourceId源下拉框id，targetId要转移到的下拉框id……
不知楼主怎么那么麻烦……

1.如果要将一个select中的option全部移动到另一个select中去，你这种实现方式必须先将原select中的所有元素全部选中后才能移动过去，而且如果原select每次只能选定一个的话那就更不能实现了。
2.你将原select中的option直接添加到目标select中，那如果目标select中已经有了这个option怎么处理呢？
3.请帮我解释下
target.append($("option[@selected]", $("#"+sourceId)))
这句话吧，我没看懂这个语法.
2 楼 tianhaoleng 2009-02-19  
同样用jquery，实现同样的功能，我这样…… 

function transferOption(sourceId,targetId){
var target = $("#"+targetId);
target.append($("option[@selected]", $("#"+sourceId)));
}


sourceId源下拉框id，targetId要转移到的下拉框id……
不知楼主怎么那么麻烦……
1 楼 foxmain 2009-02-19  
谢谢，我试了试，在IE下正常，但在FireFox下有问题.
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现 两个select之间option的转移操作

    本文将深入探讨如何使用jQuery实现两个`&lt;select&gt;`元素之间的`&lt;option&gt;`选项转移操作，包括全选、单选以及删除功能。 首先，我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本概念。`&lt;select&gt;`元素用于创建下拉列表，而`...

    实现两个select之间内容的互换实测通过

    总结一下，实现两个`&lt;select&gt;`下拉框内容互换的关键在于正确获取`&lt;select&gt;`元素，利用JavaScript或jQuery操作`&lt;option&gt;`元素，并绑定合适的事件触发互换。在VS2008环境下，可以方便地进行网页设计和开发，结合HTML、...

    用jquery获取select标签中选中的option值及文本的示例

    根据提供的文件信息，我们可以了解到如何使用jQuery来获取HTML中select标签的选中项（option）的值（value）和文本内容（text）。以下是详细的知识点： 1. 引入jQuery库：要使用jQuery操作DOM元素，必须先引入...

    jquery 操作两个select实现值之间的互相传递

    在本文中，我们将深入探讨如何利用 jQuery 来操作两个 `&lt;select&gt;` 元素，实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先，我们需要理解 `&lt;select&gt;` 元素在 HTML 中的作用。`...

    Jquery实现的双Select框多选表单提交

    以上代码中，`e.preventDefault()`用于防止页面刷新，然后我们通过jQuery遍历两个Select框中的选中项，将值添加到数组`selectedValues`中。最后，这些值可以发送到服务器进行处理。 总结一下，本文介绍了如何使用...

    jquery select 选中值设置左右select选择互换

    本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`&lt;select&gt;`元素。它是创建下拉...

    Jquery combo-select

    实现一个jQuery combo-select，首先需要准备HTML结构，包含一个select元素和一个input元素。然后，通过jQuery事件监听和DOM操作，我们可以监听用户的输入事件，动态更新下拉列表的显示状态。以下是一个基本的实现...

    jQuery 操作Option.rar

    在"jQuery操作两个select上、下、左、右移动select option演示源码"中，我们可以推测这段代码实现了以下功能： 1. **选择项的移动**：用户可以通过上、下、左、右键或者相应的UI交互，来改变`option`元素在`select`...

    jquery操作select大全

    向select元素中添加option是常用的操作之一，可以通过以下两种方式实现： - 使用`.append()`方法：此方法向select元素内部追加一个option元素。例如： ```javascript $('#id').append('&lt;option value="value"&gt;Text...

    JQuery给元素添加/删除节点比如select

    在本篇文章中，我们将探讨如何使用 jQuery 来操作 HTML 中的 `&lt;select&gt;` 元素，包括获取选中项的文本、值和索引，以及添加和删除 `&lt;select&gt;` 的 `&lt;option&gt;` 节点。 首先，我们来看如何获取 `&lt;select&gt;` 元素中选中的...

    java Script ,jquery 写的 select 中的option 左右移动，上下移动

    对于左右移动，我们可以假设存在两个`&lt;select&gt;`元素，分别表示“左侧列表”和“右侧列表”。用户可以将“左侧列表”的选项移动到“右侧列表”，反之亦然。这涉及到从一个`&lt;select&gt;`中移除元素并将其添加到另一个`...

    JQuery实现select互换数据和上下移动

    本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能，即在两个下拉框之间进行选项的互选和上下移动。 首先，我们需要了解`optiontransferselect`的基本概念。在Struts2框架中，...

    jQuery黑白两种响应式手机下拉框select

    总结起来，jQuery黑白两种响应式手机下拉框select的实现涉及到响应式设计原则、自定义CSS样式以及利用jQuery进行事件处理和DOM操作。这个过程不仅提升了用户体验，也展示了jQuery在增强网页交互性方面的强大能力。

    jQuery实现两个select控件的互移操作

    而在实际应用中，有时候需要实现两个select控件之间选项的动态移动，即用户可以将一个控件中的选项移动到另一个控件中，或者反之。这种功能通过纯JavaScript实现较为繁琐，而借助jQuery库则可以大大简化代码，提升...

    javascript 操作两个select，左右选择值。

    这个场景中，我们讨论的是如何实现一个功能，让用户可以在两个Select下拉框之间移动选择的值，这种功能常见于多选设置或者数据迁移的界面。下面我们将深入探讨如何实现这样的功能。 首先，我们需要两个HTML Select...

    JS实现select选中option触发事件操作示例

    对于纯JavaScript的实现，我们可以创建一个`&lt;select&gt;`元素，并为它添加`onchange`事件监听器。当用户改变选中的`&lt;option&gt;`时，`gradeChange`函数会被调用。在该函数中，我们通过`getElementById`获取`&lt;select&gt;`元素...

    Jquery实现的的动态无刷新的二级联动菜单

    然后遍历对象，使用jQuery的`append()`方法动态创建新的&lt;option&gt;元素，并添加到二级&lt;select&gt;中。 6. **更新视图**：最后，二级菜单的内容更新完毕，用户即可看到相应的二级选项。 这个示例代码不仅展示了jQuery的...

    利用jQuery实现多选，分栏比较

    首先，我们需要添加两个按钮，一个用于全选，一个用于全不选： ```html &lt;button id="selectAll"&gt;全选 全不选 ``` 然后，在JavaScript中，我们可以为这两个按钮添加事件监听器： ```javascript $("#selectAll")....

Magicbox
Global site tag (gtag.js) - Google Analytics