javascript 操作两个select，上下选择值
日期：2014-05-16 浏览次数：20401 次
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="b
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
