【JavaScript】DOM操作下拉框

来源：互联网发布：华为云计算论坛编辑：程序博客网时间：2024/05/01 06:36

DOM操作下拉框

这次要实现一个效果，如下图:

在左边选框里选择一个选项，点击"-->"，就会把该选项选到右边框里。
在左边选框里选择多个选项，点击"==>"，就会把多个选项选到右边框里。

在右边选框里选择一个选项，点击"-->"，就会把该选项选到左边框里。
在右边选框里选择多个选项，点击"==>"，就会把多个选项选到左边框里。

效果就是这样，下面我们来实现它:

实现源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>js测试</title></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">  <tr><td width="126"><!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--><select name="first" multiple="multiple" size=10 class="td3" id="first">  <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></select>    </td><td width="69" valign="middle">   <input name="add"  id="add" type="button" class="button" value="-->" />    <input name="add_all" id="add_all"  type="button" class="button" value="==>" />    <input name="remove"  id="remove" type="button" class="button" value="<--" />   <input name="remove_all"  id="remove_all" type="button" class="button" value="<==" /></td><td width="127" align="left">  <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="选项9">选项9</option>  </select></td>  </tr></table></div></body><script language="javascript">window.onload=function(){//选中的从左端移到右端document.getElementById("add").onclick=function(){//获取selectvar firstElement=document.getElementById("first");//获取optionvar optionElements=firstElement.getElementsByTagName("option");var len=optionElements.length;//获取右边selectvar secondElement=document.getElementById("second");//遍历optionfor(var i=0;i<len;i++){/*selectedIndex表示当前被选中的选项的索引，从0开始。*如果没有被选中的selectedIndex=-1*如果有多个被选中，selectedIndex的值永远是第一个被选中的值*javaScript的数组是动态的数组，数组长度是可变的，索引值也在变*///alert(firstElement.selectedIndex);if(firstElement.selectedIndex!=-1){secondElement.appendChild(optionElements[firstElement.selectedIndex]);}}}/********************************************************************///全部从左端移到右端document.getElementById("add_all").onclick=function(){//获取selectvar firstElement=document.getElementById("first");//获取optionvar optionElements=firstElement.getElementsByTagName("option");var len=optionElements.length;//获取右边selectvar secondElement=document.getElementById("second");//遍历optionfor(var i=0;i<len;i++){secondElement.appendChild(optionElements[0]);}}//选中的从右端移到左端document.getElementById("remove").onclick=function(){//获取selectvar secondElement=document.getElementById("second");//获取optionvar optionElements=secondElement.getElementsByTagName("option");var len=optionElements.length;//获取左边selectvar firstElement=document.getElementById("first");//遍历optionfor(var i=0;i<len;i++){if(secondElement.selectedIndex!=-1){firstElement.appendChild(optionElements[secondElement.selectedIndex]);}}}/********************************************************************///全部从右端移到左端document.getElementById("remove_all").onclick=function(){///获取selectvar secondElement=document.getElementById("second");//获取optionvar optionElements=secondElement.getElementsByTagName("option");var len=optionElements.length;//获取左边selectvar firstElement=document.getElementById("first");//遍历optionfor(var i=0;i<len;i++){firstElement.appendChild(optionElements[0]);}}/************************************************************************///双击的从左端移到右端document.getElementById("first").ondblclick=function(){var firstElement=document.getElementById("first");var optionElements=firstElement.getElementsByTagName("option");var secondElement=document.getElementById("second");for(var i=0;i<optionElements.length;i++){secondElement.appendChild(optionElements[firstElement.selectedIndex]);}}/************************************************************************///双击的从右端移到左端document.getElementById("second").ondblclick=function(){var secondElement=document.getElementById("second");var optionElements=secondElement.getElementsByTagName("option");var firstElement=document.getElementById("first");for(var i=0;i<optionElements.length;i++){firstElement.appendChild(optionElements[secondElement.selectedIndex]);}}}</script></html>

测试结果正常，编写成功！！虽然代码有些长，但是我们还是实现了这个效果，以后学精以后可以将代码适当的简化

转载请注明出处：http://blog.csdn.net/acmman/article/details/48109035

0 0