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 type="button" value=">" style="0px solid blue" onclick="getLeftSelectOpt('leftSID','rightSID','sigleOption')"> <br/><br/> <input type="button" value=">>" style="0px solid blue" onclick="getLeftSelectOpt('leftSID','rightSID','allOption')"> <br/><br/> <input type="button" value="<" style="0px solid blue" onclick="getLeftSelectOpt('rightSID','leftSID','sigleOption')"> <br/><br/> <input type="button" value="<<" 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 value="提交" type="button" onclick="getRightSelectValue('rightSID')"/> </center> </form> </body>?
?
实例图片:
?