Code<html>
<head>
<title>test2</title>
<style type="text/css">
#teldiv{
font-size:16px;
text-align:center;
width:700px;
}
#titlediv{
font-weight:bold;
margin-top:10px;
margin-bottom:10px;
}
#optidiv{
width:660px;
margin:auto;
}
#leftdiv,#rightdiv{
float:left;
width:300px;
}
#leftdiv select,#rightdiv select{
width:250px;
}
#btndiv{
float:left;
width:30px;
padding-top:50px;
}
</style>
<script type="text/javascript" language="javascript">
function addaction(){
mvoption('leftselect[]','rightselect[]');
}
function decaction(){
mvoption('rightselect[]','leftselect[]');
}
function addtoselect(selectid,optionvalue,optiontext){
var rightselect = document.getElementById(selectid);
if(rightselect && optionvalue && optiontext){
rightselect.options.add( new Option(optiontext, optionvalue) );
}
}
function mvoption(srcselect ,destselect){
var leftseleArr = document.getElementById(srcselect);
for(var tmp_count=0;tmp_count<leftseleArr.options.length;){
if(leftseleArr.options[tmp_count].selected==true){
var optionsvalue=leftseleArr.options[tmp_count].value;
var optionstext=leftseleArr.options[tmp_count].text;
addtoselect(destselect,optionsvalue,optionstext);
leftseleArr.options[tmp_count] = null;
}else{
tmp_count++;
}
}
}
function setalloptselected(selectname){
var sel = document.getElementById(selectname);
if(sel){
for(var tmp_count=0;tmp_count<sel.options.length;tmp_count++){
sel.options[tmp_count].selected=true;
}
}
}
function submitdata(){
var myform = document.getElementById('form1');
if(myform){
setalloptselected('rightselect[]');
myform.submit();
}
}
</script>
</head>
<body>
<form action="" method="POST" id="form1">
<div id="teldiv">
<div id="titlediv" >list</div>
<div id="optidiv" >
<div id="leftdiv" >
<select id="leftselect[]" size="10" multiple="multiple" >
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
</select>
</div>
<div id="btndiv">
<input type="button" id="addbtn" name="addbtn" value= " >> " onclick="addaction();" /><br/><br/>
<input type="button" id="decbtn" name="decbtn" value=" << " onclick="decaction();" />
</div>
<div id="rightdiv">
<select id="rightselect[]" name="rightselect[]" size="10" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<input type="button" value="submit" onclick="submitdata();" />
</form>
</body>
</html>
select元素的 .options.length = 0 会清空其下所有option
.options.add(new option(optiontext,optionvalue)) 增加一个option
.options[元素编号].selected == true 判断该option是否被选中
可以多选的select:
<select id="..." name="..." size="10" multiple="multiple" ><option value="...">...</option></select>