select2.length = select1.length
for (var i=0;i<select1.length;i++) {
select2.options[i].text = select1.options[i].text;
}select框有好多属性，基本的如：text，value等
还可以自定义属性，如：
<select otherPro="other" name=""><option></option></select>
事件和方法与别的控件对象类似
for (var i=0;i<select1.length;i++) {
select2.options[i].text = select1.options[i].text;
}select框有好多属性，基本的如：text，value等
还可以自定义属性，如：
<select otherPro="other" name=""><option></option></select>
事件和方法与别的控件对象类似
for (var i=0;i<select1.options.length;i++) {
var op=document.createElement("option")
op.text=select1.options[i].text;
op.value = select1.options[i].value;
select2.add(op)
}
用select.options.length而不用select.length,因為在select有同名時,select.length是同名select個數,
用
<script>
for(var item in selectObj)
{
document.write(item,"=",selectObj[item],"<br>")
}
</script>
可打印出select的所有屬性.
我的代码是这样的
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<div align="center"><table width="30%" border="0">
<tr>
<td rowspan="2">
<div align="center">
<select name="select" size="10" style="width:120">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</td>
<td height="64">
<div align="center">
<input type="submit" name="Submit" value="Submit">
</div>
</td>
<td rowspan="2">
<div align="center">
<select name="select2" size="10" style="width:120">
<script>
for (var i=0;i<select1.options.length;i++) {
var op=document.createElement("option")
op.text=select1.options[i].text;
op.value = select1.options[i].value;
select2.add(op)
}
</script>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" name="Submit2" value="Submit">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script>
for (var i=0;i<form1.select.options.length;i++) {
var op=document.createElement("option")
op.text=form1.select.options[i].text;
op.value = form1.select.options[i].value;
form1.select2.add(op)
}
</script>
(2)单击按钮submit2后,select2中被选择的项被清除(select1中的内容不变)帖子再加30分
－－－－－－－－－－－－－－－－－－－－－－－
<html>
<head>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<body bgColor=skyblue>
<form action="select.htm" method="post" name="myform">
<br>
<br>
<br>
<div align="center">
<center>
<left>
<table style="FONT-SIZE: smaller">
<tr>
<td width="116">
<table>
<tr>
<td>
<select name="left_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
<OPTION VALUE="D">D</OPTION>
<OPTION VALUE="E">E</OPTION>
<OPTION VALUE="F">F</OPTION>
<OPTION VALUE="G">G</OPTION>
<OPTION VALUE="H">H</OPTION>
<OPTION VALUE="I">I</OPTION>
<OPTION VALUE="J">J</OPTION>
<OPTION VALUE="K">K</OPTION>
<OPTION VALUE="L">L</OPTION>
<OPTION VALUE="M">M</OPTION>
<OPTION VALUE="N">N</OPTION>
<OPTION VALUE="O">O</OPTION>
<OPTION VALUE="P">P</OPTION>
</select>
</td>
</tr>
</table>
</td>
<td width="43">
<table border="0">
<br>
<tr>
<td>
<INPUT language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add any" type=button value="8">
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add all" type=button value=: DESIGNTIMESP="17713">
</td>
</tr>
<tr>
<td> <br>
<br>
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete any" type=button value="7">
</td>
</tr>
<tr>
<td>
<INPUT language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete all" type=button value="9">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</TD>
<td width="119">
<table style="FONT-SIZE: smaller">
<tr>
<td>
<select name="right_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
</select>
</td>
</tr>
</table>
</td>
<td width="10"> </td>
</TR>
</TABLE>
</center>
</div>
</form>
</body>
</html>
<script language="javascript">
function fun_select_addany(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].selected == true){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
theform.left_select.options.remove(i);
i--;
}
}
sort_select(document.myform);
} function fun_select_addall(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
}
theform.left_select.length=0;
sort_select(document.myform);
} function fun_select_dltany(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
if (theform.right_select.options[i].selected == true){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
theform.right_select.options[i] =new Option("");
theform.right_select.options.remove(i);
i--;
}
}
sort_select(document.myform);
}function fun_select_dltall(theform){
var i;
for (i=0;i<theform.right_select.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
}
theform.right_select.length=0;
sort_select(document.myform);
}
function sort_select(theform){
var i;
var left_array= new Array();
for (i=0;i<theform.left_select.length;i++){
left_array[i] = new Array(theform.left_select.options[i].text);
} left_array.sort(); theform.left_select.length=0;
for (i=0;i<left_array.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);
} left_array= new Array();
}
</script>
1.有点画蛇添足的功能，就是右边的会自动排序。懒的改了。
2.单击按钮submit2后,select2中被选择的项被清除(select1中的内容不变):这句有歧义，到底是原来的内容保持不变还是选择后保持不变？我提供的代码是原来数据保持不变有空了去给我的问题提提意见：
http://www.csdn.net/expert/topic/606/606318.xml?temp=.2741053
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function move1(from,to){
for (var i=0;i<from.options.length;i++) {
if(!from.options[i].selected)continue;
var op=document.createElement("option")
op.text=from.options[i].text;
op.value = from.options[i].value;
to.add(op)
}
}function move2(from){
for (var i=from.options.length-1;i>=0;i--) {
if(!from.options[i].selected)continue;
from.remove(i)
}
}
</script>
</head><body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<div align="center"><table width="30%" border="0">
<tr>
<td rowspan="2">
<div align="center">
<select name="select1" size="10" style="width:120" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</td>
<td height="64">
<div align="center">
<input type="button" name="Submit" value=">>" onclick=move1(document.form1.select1,document.form1.select2)>
</div>
</td>
<td rowspan="2">
<div align="center">
<select name="select2" size="10" style="width:120" multiple>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" name="Submit2" value="<<" onclick=move2(document.form1.select2)>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>