`

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

 
阅读更多



 

下面是我做的一个简单的例子.

 

 

就是当选择左边的select下拉框时,然后再右边显示出来:

在右边选择,在左边显示..具体怎么实现,请看代码:

 

javascript代码:

 

<script type="text/javascript">
    	//获取左边选择的;
    	function getLeftSelectOpt(left,right,selectType){
    		var leftSelectObj = document.getElementById(left);
    		var rightSelectObj = document.getElementById(right);
			var selectIndex = new Array();    //保存选中的select中的下标;
			var m = 0;
   			if(selectType!=null && selectType=='allOption'){
	    		selectAllOption(left,right);
    		}else{
    			selectIndex.length = 0;
    			for(var i = 0;i<leftSelectObj.length;i++){
    				//获取选中的;
    				if(leftSelectObj[i].selected){
	    				//option中，第一个参数,是显示的名称，第二个是value;
		    			var op=new Option(leftSelectObj[i].innerHTML,leftSelectObj[i].value);
		    			rightSelectObj.options.add(op);
		    			selectIndex.push(i);
		    			//leftSelectObj.options.remove(i);
		    			m++;
	    			}
	    		}
	            
	            //根据选中的name进行比较;
	    		for(var i = 0;i<leftSelectObj.length;i++){
	    			for(var x = 0;x<rightSelectObj.length;x++){
	    				if(leftSelectObj[i].value ==rightSelectObj[x].value ){
	    					leftSelectObj.options.remove(i);
	    				}
	    			}
	    		}
    		}	
    	}
    	
    	//选择所有;
    	function selectAllOption(left,right){
    		var leftSelectOption = document.getElementById(left);
    		var rightSelectOption =  document.getElementById(right);
    		//循环;
    		for(var i = 0;i<leftSelectOption.options.length;i++){
   				//option中，第一个参数,是显示的名称，第二个是value;
    			var op=new Option(leftSelectOption[i].innerHTML,leftSelectOption[i].value);
    			rightSelectOption.options.add(op);
		    }
    		//清空左边select所以option;
    		leftSelectOption.options.length = 0;
    	}
    	
    	//获取右侧下拉框的方法;
    	function getRightSelectValue(right){
    		var rightValue = document.getElementById(right);
    		var result = "";
    		for(var i = 0;i<rightValue.length;i++){
    			result = result + rightValue[i].value +",";
    		}
    		
    		if(result!=null && ""!=result){
    			var inx = result.lastIndexOf(",");
    			result = result.substring(0,inx);
    		}else{
    			result ="你没有选择!";
    		}
    		alert(result);
    	}
    </script>

 

 

 css代码:

 <style type="text/css">
    	.btn{
    		border:1px solid blue;
    		background-color:Silver;
    		width:100px;
    	}
</style>

 

 

 

HTML代码:

<body>
     <form action="#" method="post" name="myForm">
     	<center>
     	<div style="float: inherit;width: 700px;border:0px solid red;" >
     		<span style="float: left;width:100px;text-align: left;">
		     	请选择:<br/>
		     	<select 
			     	name="leftSID" 
			     	multiple="multiple" 
			     	style="overflow:visible;width: 120px;height: 150px;text-align: left">
		     					<option value="101">董事长</option>
		     					<option value="102">总经理</option>
		     					<option value="103">采购员</option>
		     					<option value="104">接待员</option>
		     					<option value="105">程序员</option>
		     					<option value="106">后勤员</option>
		     					<option value="107">销售员</option>
		     					<option value="108">会计员</option>
		     	</select>
    		</span> 
    		
    		<!-- 按钮; -->
    		<span style="float: left;width:150px;text-align: center;">
	    		<br/>
	    		<input 
		    		class="btn" 
		    		type="button" value=">" 
		    		style="0px solid blue" 
		    		onclick="getLeftSelectOpt('leftSID','rightSID','sigleOption')">	    		
	    			<br/><br/>
	    			
	    		<input 
	    			class="btn" 
	    			type="button" 
	    			value=">>" 
	    			style="0px solid blue" 
	    			onclick="getLeftSelectOpt('leftSID','rightSID','allOption')">	
	    			<br/><br/>
	    		<input 
		    		class="btn" 
		    		type="button" 
		    		value="&lt;" 
		    		style="0px solid blue" 
		    		onclick="getLeftSelectOpt('rightSID','leftSID','sigleOption')">
	    			<br/><br/>
	    			
	    		<input 
	    			class="btn" 
	    			type="button" 
	    			value="&lt;&lt;" 
	    			style="0px solid blue" 
	    			onclick="getLeftSelectOpt('rightSID','leftSID','allOption')">
    		</span>
    		
     		<span style="float: left;width:100px;text-align: left;">
	 			选择之后<br/>
		     	<select 
			     	name="rightSID" 
			     	multiple="multiple" 
			     	multiple="multiple" 
			     	style="overflow:visible;width: 120px;height: 150px;">			
		     	</select>
	     	</span>
     	</div>
     	
     	<br/>
     	<input class="btn" value="提交" type="button" onclick="getRightSelectValue('rightSID')"/>
     	</center>
     </form>
  </body>

 

 

实例图片:

 

  • 大小: 3.4 KB
分享到：
| MyEclipse6.5代码提示快键健设置无效问题解 ...
评论
发表评论

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

相关推荐

    JavaScript实现两个select下拉框选项左移右移

    主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    好看的select下拉框（带搜索功能）javaScript，jquery两种方式实现

    好看的select下拉框（带搜索功能），由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现

    javascript 操作select下拉列表框的一点小经验

    首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，...

    程序天下:JavaScript实例自学手册

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    《程序天下：JavaScript实例自学手册》光盘源码

    6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...

    javascript函数的解释

    40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在 值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor (Math.random()*(n+1))...

    两个select多选模式的选项相互移动(示例代码)

    如下所示： 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;head&gt;&lt;... charset=utf-8″ /&gt;&lt;...script type=”text/javascript”

    107个常用javascript语句

    40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回 value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n 1))...

    js简单实现Select互换数据的方法

    本文实例讲述了js简单实现Select互换数据的...这里基于javascript实现两个Select互换数据，简单实用，大家都见到过的，不多说了，即使手头暂时用不上，收藏起来，以备后用。 运行效果如下图所示： 在线演示地址如下： ...

    JavaScript笔记

    |--3.concat()方法--用于连接两个或多个数组，该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素 14.Function：js中一切都是对象，连方法都是1个对象！！ ...

    JavaScript简易计算器制作

    在动手之前，我们要先理清思路，看图，若想实现这样一个简易的计算器，我们需要两个输入框用来存放我们需要进行运算的两个值，一个下拉框来选择要进行什么运算，一个按钮来实现开始运算，一个输入框来保存我们计算后...

    javaScript常用事件

    当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： &lt;Form&gt; ('this.test)"&gt; &lt;/Form&gt; 7.onSubmit事件：属于表单元素，写在表单标签内。语法：...

    JavaScript Table行定位效果

    还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不...

    react-dropdown-tree-select:轻巧，可访问，可自定义且快速的React下拉树选择组件

    React下拉树选择React下拉树选择一种轻量级且快速的控件，用于呈现可以显示分层树数据的选择组件。 另外，该控件以药丸形式显示选择，并允许用户搜索选项以进行快速过滤和选择。 还支持显示部分选定的节点。目录随着...

    LC-select:Superlight Vanilla javascript插件，用于现代Web下拉菜单。 支持多选项，搜索和图像。 专为无缝主题设计

    热门功能列表： sigle 20KB文件，没有依赖项，100％纯javascript 包括两个主题（浅色，深色）。 专为主题而设计主题混合支持使用前缀选择器同时支持简单和多个选择字段完全响应，适合任何宽度（可选）用于简单选择...

    基于JQuery的Select选择框的华丽变身

    我现在推荐的是一款JavaScript插件，它有JQuery和Prototype两种版本，支持所有类型的浏览器。使用它后，你的页面上的select选择框会变的漂亮的让你大吃一惊，下面是使用前和使用后的对比效果图。 单选模式： 多选...

    客户端统一验证JavaScript函数库及示例源码

    另外，其他函数如数据长度的验证，是验证内容的实际字节的长度，即汉字两个字节英文及数字两个字节，判断依据ASCII值，计算机在设计字符存储的时候就是超过一个字节的ASCII字符都是以两个字节存放的。同时...

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