多选框互选

最新推荐文章于 2021-02-17 11:21:55 发布

desert3

最新推荐文章于 2021-02-17 11:21:55 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： JavaScript J# 脚本 HTML ViewUI

本文链接：https://blog.youkuaiyun.com/desert3/article/details/83923908

Javascript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种通过脚本实现两个多选框之间的数据移动和同步的方法。具体实现了当在一个多选框中选择选项时，这些选项可以被移动到另一个多选框，并且能够避免重复选项的出现。该方案适用于网页表单中需要灵活操作多选字段的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多选框：multiple OPTGROUP


第一个多选框
<SELECT id=select1 style="WIDTH: 170px; HEIGHT: 235px" 
            onchange="moveSelected(this.form.select1, this.form.select2);" 
            multiple name=select1><OPTGROUP label=合肥市> <OPTION 
                value=340100>合肥市</OPTION> <OPTION value=340101>市辖区</OPTION> 
                <OPTION value=340102>瑶海区</OPTION> 
</SELECT>
第二个多选框

<SELECT id=select2 style="WIDTH: 170px; HEIGHT: 235px" 
            onchange="moveSelected(this.form.select2, this.form.select1);" 
            multiple name=select2></SELECT>


// 脚本
<SCRIPT type=text/javascript>//<![CDATA[
function moveSelected(sourceSelect, targetSelect, isDelete){
	var cachOptionsArray = new Array();
	var index = 0;
	for (var i = sourceSelect.options.length - 1; i >= 0; i--){
		if (sourceSelect.options[i].selected){
			cachOptionsArray[index] = new Option(sourceSelect.options[i].text, sourceSelect.options[i].value);
			if(isDelete==undefined || isDelete==true){
				sourceSelect.options[i] = null;
			}
			index++;
		}
	}
	var exist = false;
	for (var i = cachOptionsArray.length - 1; i >= 0; i--){
		exist = false;
		for (var j = 0; j < targetSelect.options.length; j++){
			if (targetSelect.options[j].value.toString() == cachOptionsArray[i].value.toString()){
				exist = true; 
				break;
			}
		}
		if (!exist){
			targetSelect.options[targetSelect.options.length] = cachOptionsArray[i];
		}
	}
}
//]]></SCRIPT>