您的位置：首页 > Web前端 > JavaScript

【JavaScript】DOM操作下拉框

2015-08-30 20:48 555 查看

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(){
//获取select
var firstElement=document.getElementById("first");

//获取option
var optionElements=firstElement.getElementsByTagName("option");
var len=optionElements.length;

//获取右边select
var secondElement=document.getElementById("second");

//遍历option
for(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(){
//获取select
var firstElement=document.getElementById("first");

//获取option
var optionElements=firstElement.getElementsByTagName("option");
var len=optionElements.length;

//获取右边select
var secondElement=document.getElementById("second");

//遍历option
for(var i=0;i<len;i++){
secondElement.appendChild(optionElements[0]);
}
}
//选中的从右端移到左端
document.getElementById("remove").onclick=function(){
//获取select
var secondElement=document.getElementById("second");

//获取option
var optionElements=secondElement.getElementsByTagName("option");
var len=optionElements.length;

//获取左边select
var firstElement=document.getElementById("first");

//遍历option
for(var i=0;i<len;i++){
if(secondElement.selectedIndex!=-1){
firstElement.appendChild(optionElements[secondElement.selectedIndex]);
}
}
}
/********************************************************************/
//全部从右端移到左端
document.getElementById("remove_all").onclick=function(){
///获取select
var secondElement=document.getElementById("second");

//获取option
var optionElements=secondElement.getElementsByTagName("option");
var len=optionElements.length;

//获取左边select
var firstElement=document.getElementById("first");

//遍历option
for(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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航