两个下拉列表的移动(只完成左到右，右到左原理相同)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scriptlanguage="javascript">
/*增加选中的部分*/
functionadd(){
varfirstNode=document.getElementById("first");
varsecond=document.getElementById("second");
varoptions=firstNode.getElementsByTagName("option");
for(vari=0;i<options.length;i++){
varoptionElement=options[i];
if(optionElement.selected){
//alert(optionElement.value+""+optionElement.text);
//创建标签
varelement=document.createElement("<option>");
//设置属性
element.setAttribute("value",optionElement.value);
//创建文本
varoptionText=document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项
optionElement.parentNode.removeChild(optionElement);
}
}
}
/*增加全部*/
functionadd_all(){
varfirstNode=document.getElementById("first");
varsecond=document.getElementById("second");
varoptions=firstNode.getElementsByTagName("option");
varoptionSize=options.length;
for(vari=0;i<optionSize;i++){
varoptionElement=options[0];
//alert(optionElement.value+""+optionElement.text+"i"+i);
//创建标签
varelement=document.createElement("<option>");
//设置属性
element.setAttribute("value",optionElement.value);
//创建文本
varoptionText=document.createTextNode(optionElement.text);
//追加文本
element.appendChild(optionText);
//增加option选项
second.appendChild(element);
//移除第一个下拉列表中的选项（注意这里删除的是option[0]）
optionElement.parentNode.removeChild(options[0]);
}
}
/*移除选中的部分*/
functionremove(){
}
/*移除全部*/
functionremove_all(){
}
functionchange(){
varfirst=document.getElementById("first");
varsecond=document.getElementById("second");
second.appendChild(this[this.selectedIndex]);
}
</script>
</head>
<body>
<tablealign="center">
<tr>
<tdid="1"><!--multiple设置能否同时选中多个size设置下拉列表的长度-->
<selectname="first"size="10"multiple="multiple"id="first"class="td3"ondblclick="change()">
<optionvalue="选项1">选项1</option>
<optionvalue="选项2">选项2</option>
<optionvalue="选项3">选项3</option>
<optionvalue="选项4">选项4</option>
<optionvalue="选项5">选项5</option>
<optionvalue="选项6">选项6</option>
<optionvalue="选项7">选项7</option>
<optionvalue="选项8">选项8</option>
<optionvalue="选项9">选项9</option>
</select>
<td>
<tdwidth="69"valign="middle">
<inputname="add"id="add"type="button"class="button"value="-->"onclick="add();"/>
<inputname="add_all"id="add_all"type="button"class="button"value="==>"onclick="add_all();"/>
<inputname="remove"id="remove"type="button"class="button"value="<--"onclick="remove();"/>
<inputname="remove_all"id="remove_all"type="button"class="button"value="<=="onclick="remove_all();"/>
</td>
<td><!--multiple设置能否同时选中多个size设置下拉列表的长度-->
<selectname="second"size="10"multiple="multiple"id="second"class="td3">
<optionvalue="选项10">选项10</option>
</select>
<td>
</tr>
</table>
</body>
</html>