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

最新推荐文章于 2023-07-09 09:38:20 发布

悠悠隐于市

最新推荐文章于 2023-07-09 09:38:20 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zhou363667565/article/details/84005197

JavaScript 同时被 2 个专栏收录

37 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

本文提供了一个交互式选择与展示的示例，通过JavaScript实现了左侧选择项变化时，右侧展示对应选项的功能。

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

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

就是当选择左边的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>

实例图片: