<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框</title>
<script>
function isExist(oOption,obj){
var b = false;
for(var i=0;i<obj.length;i++){
if(obj[i].value == oOption){
b = true;
break;
}
}
return b;
}
function leftSingleSelect(){
var sel = document.getElementById("sel");
var sel2 = document.getElementById("sel2");
var selLength = sel.length;
for(var i=0;i<selLength;i++){
if(sel[i].selected){
var oOption = document.createElement('OPTION');
oOption.text = sel.options[i].text;
oOption.value = sel.options[i].value;
var flag = isExist(oOption.value,sel2);
if(flag){
alert("不可以重复选择!");
continue;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")!=-1){
sel2.add(oOption,null);
}else{
sel2.add(oOption);
}
}
}
}
function rightSingleSelect(){
var sel2 = document.getElementById("sel2");
for(var i=0;i<sel2.length;i++){
if(sel2[i].selected){
sel2.remove(i);
i--;
}
}
}
function rightAllSelect(){
var sel = document.getElementById("sel");
var sel2 = document.getElementById("sel2");
for(var i=0;i<sel2.length;i++){
sel2.remove(i);
i--;
}
}
function leftAllSelect(){
var sel = document.getElementById("sel");
var sel2 = document.getElementById("sel2");
for(var i=0;i<sel.length;i++){
var oOption = document.createElement('OPTION');
oOption.text = sel.options[i].text;
oOption.value = sel.options[i].value;
var exist = isExist(oOption.value,sel2);
if(exist){
alert("不可以重复添加!");
break;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")!=-1){
sel2.add(oOption,null);
}else{
sel2.add(oOption);
}
}
}
</script>
</head>
<body>
<table border="0">
<tr><td>
<select id="sel" name="sel" size="10" style="width:180px" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
<input type="button" name="b1" style="width:50px" value=">>" οnclick="leftAllSelect()"/> <br />
<input type="button" name="b2" style="width:50px" value=">" οnclick="leftSingleSelect()"/> <br />
<input type="button" name="b3" style="width:50px" value="<" οnclick="rightSingleSelect()"/> <br />
<input type="button" name="b4" style="width:50px" value="<<" οnclick="rightAllSelect()"/> <br />
</td>
<td>
<select id="sel2" name="sel2" size="10" style="width:180px" multiple>
</select>
</td></tr>
</table>
</div>
</body>
</html>