`

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代码提示快键健设置无效问题解 ...
评论
发表评论

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

相关推荐

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

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

    多个select 的互斥选择实现

    // 当任意一个select元素的值改变时，触发处理函数 selects.forEach(select =&gt; { select.addEventListener('change', () =&gt; { // 遍历所有select元素，如果当前改变的不是目标元素，则取消其选中状态 selects....

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

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

    两个select 框的数据移动

    要实现“两个select框的数据移动”，我们需要关注以下几个关键知识点： 1. **事件监听**：首先，我们需要在源`&lt;select&gt;`框上监听`change`事件。当用户做出选择时，这个事件会被触发。此外，如果支持多选，还需监听`...

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中，`&lt;select&gt;`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作，包括添加选项、删除选项、获取选中的值等。...

    Javascript Select操作大集合

    3. **移动Option到另一个Select中** 移动Option可以在不同的Select之间进行，`fnMove(fromSelectID, toSelectID)`函数演示了这个过程。它首先选择要移动的Option，然后将其添加到目标Select中，并从源Select中移除...

    双选框 两个<select>标签组成 高效代码清晰

    总结起来，这个项目利用了两个`&lt;select&gt;`标签和JavaScript实现了一个双向选择的组件，具备良好的用户体验和代码质量。开发者巧妙地运用了DOM操作、事件监听以及可能的Map数据结构，实现了选项的动态移动和提交功能。...

    jquery双向选择器两侧select框列表文字左右选择器代码

    除了基本的添加和移除选项，我们可能还需要处理一些特殊情况，比如防止某个选项同时出现在两个select框中，或者限制可选的选项数量。这些可以通过添加额外的条件判断来实现。 此外，为了提高用户体验，可以添加一些...

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

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

    select互选效果

    在网页设计中，"select互选效果"是一种交互设计特性，允许用户在两个或多个下拉选择框（`&lt;select&gt;`元素）之间进行双向选择，实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景，比如地区选择、类别筛选...

    JSP+AJAX实现两级select联动 代码

    要实现这样的功能，我们首先需要在JSP中设置两个select元素，并用JavaScript绑定事件监听器。当第一个select的值改变时，触发AJAX请求。请求的URL通常是一个后台处理程序，由JSP编写，负责从数据库（这里是MySQL）中...

    javascript获取下拉列表的值

    在JavaScript中，获取下拉列表（也称为选择框或`&lt;select&gt;`元素）的值是一项常见的任务，特别是在处理用户输入和交互时。本篇博文中，我们将深入探讨如何有效地实现这一功能。 首先，我们需要理解HTML中的`&lt;select&gt;`...

    JS动态添加Select中的Option元素值

    在JavaScript（JS）编程中，动态添加Select中的Option元素值是一项常见的需求，特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能，并提供一个实际的案例来演示这一过程。 首先，我们要理解HTML...

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

    根据提供的文件内容，我们可以提炼出以下关于JavaScript实现两个select下拉框选项左移右移的知识点： 1. 通过JavaScript实现两个下拉框间选项的转移是常见的前端技术应用场景。它允许用户通过简单的操作来移动元素...

    JavaScript对Select的操作.doc

    Option由两个参数构成：文本和值。 ```javascript function addOption() { var obj = document.getElementById('mySelect'); obj.add(new Option("文本", "值")); } ``` 3. **删除所有 Option** 获取Select...

    html最全的js javascript操作select 下拉框

    如果只提供了两个参数，选项的值将默认为其显示文本。 ```javascript function selectOptionAdd(oSelect, sName, sValue) { var oOption = document.createElement("option"); oOption.appendChild(document....

    Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

    选择特定文本或值的选项，可以分别使用以下两个函数： ```javascript // 根据文本选中选项 function jsSelectItemByValue(objSelect, objItemText) { var isExit = false; for (var i = 0; i ; i++) { if ...

    javascript写的select

    根据描述，这是一个用JavaScript编写的自定义Select组件，它具备以下功能特性： - 支持通过首字母进行快速筛选。 - 支持使用键盘上下键来选择选项。 - 支持通过回车键获取选中的值。 - 数据源既可以来自现有的Select...

    用js实现两个select下拉框之间的元素互相移动

    本文将深入探讨如何使用JavaScript实现两个Select下拉框之间的元素互相移动的功能。这一功能常见于需要动态调整选项归属的情景，例如在多选设置或数据分类中。 首先，我们需要创建两个Select元素，分别命名为`...

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