下面是我做的一个简单的例子.
就是当选择左边的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"
οnclick="getLeftSelectOpt('leftSID','rightSID','sigleOption')">
<br/><br/>
<input
class="btn"
type="button"
value=">>"
style="0px solid blue"
οnclick="getLeftSelectOpt('leftSID','rightSID','allOption')">
<br/><br/>
<input
class="btn"
type="button"
value="<"
style="0px solid blue"
οnclick="getLeftSelectOpt('rightSID','leftSID','sigleOption')">
<br/><br/>
<input
class="btn"
type="button"
value="<<"
style="0px solid blue"
οnclick="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" οnclick="getRightSelectValue('rightSID')"/>
</center>
</form>
</body>
实例图片:
