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

[JavaScript]操作下拉列表

2016-03-04 08:56 513 查看 


<!DOCTYPE html>
<html>
<head>
<title>下拉列表</title>
<meta charset="utf-8"/>
<script type="text/javascript">
/*
列表移动思想:
1: <select>下拉标签有个selectedIndex属性 ,
当下拉标签调用该属性时,
会返回当前列表中--->第一个被选中的<option>的下标,
利用此思想,获取下拉列表数组,利用返回的下标
用第二个下拉标签appendChild(),即可实现移动
2: 双击事件 : ondblclick
3: JS中的数组长度是非定长的,所以在for循环中,
绝对不能使用数组的长度做条件,应获取数组长度,使用定量做条件

例如:
//选中的从左边移到右边
document.getElementById("rightPart").onclick = function () {
var one = document.getElementById("one");
var oneItems = one.getElementsByTagName("option");
//这里获取数组长度,做循环条件!!!!!!!!
var length = oneItems.length;
var two = document.getElementById("two");
//条件为 i < length , 不能为 oneItems.length (它是变化的) !!!
for (var i = 0; i < length; i++) {
if (one.selectedIndex!=-1) {
//每次移动前返回被选中的第一个的下标!!!one.selectedIndex
two.appendChild(oneItems[one.selectedIndex]);
}
}
}

*/
window.onload = function () {
/************************************************************************************/
//选中的从左边移到右边
document.getElementById("rightPart").onclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第一个下拉列表所有项
var oneItems = one.getElementsByTagName("option");
var length = oneItems.length;
//获取第二个下拉列表
var two = document.getElementById("two");
//遍历第一个下拉列表
for (var i = 0; i < length; i++) {
if (one.selectedIndex!=-1) {
two.appendChild(oneItems[one.selectedIndex]);
}
}
}

/************************************************************************************/
//选中的从左边全部右移
document.getElementById("rightAll").onclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第一个下拉列表所有项
var oneItems = one.getElementsByTagName("option");
var length = oneItems.length;
//获取第二个下拉列表
var two = document.getElementById("two");
//遍历
for (var i = 0; i < length; i++) {
two.appendChild(oneItems[0]);
}
}

/************************************************************************************/
//双击时把左侧下拉列表右移
document.getElementById("one").ondblclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第一个下拉列表所有项
var oneItems = one.getElementsByTagName("option");
//获取第二个下拉列表
var two = document.getElementById("two");
//在第二个下拉列表添加选中的下拉项
two.appendChild(oneItems[one.selectedIndex]);
}

/************************************************************************************/
//选中的从右边移到左边
document.getElementById("leftPart").onclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第二个下拉列表
var two = document.getElementById("two");
//获取第二个下拉列表的下拉项
var twoItems = two.getElementsByTagName("option");
//获取第二个下拉列表的长度
var length = twoItems.length;
//遍历
for (var i = 0; i < length ; i++) {

if (two.selectedIndex!=-1) {
one.appendChild(twoItems[two.selectedIndex]);
}
}

}

/************************************************************************************/
//选中的从右边全部移到左边
document.getElementById("leftAll").onclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第二个下拉列表
var two = document.getElementById("two");
//获取第二个下拉列表的下拉项
var twoItems = two.getElementsByTagName("option");
//获取第二个下拉列表的长度
var length = twoItems.length;
//遍历
for (var i = 0; i < length; i++) {
one.appendChild(twoItems[0]);
}
}

/************************************************************************************/
//双击时把右侧下拉列表左移
document.getElementById("two").ondblclick = function () {
//获取第一个下拉列表
var one = document.getElementById("one");
//获取第二个下拉列表
var two = document.getElementById("two");
//获取第二个下拉列表的下拉项
var twoItems = two.getElementsByTagName("option");
//在第一个下拉列表添加选中的下拉项
one.appendChild(twoItems[two.selectedIndex]);
}
}
</script>
</head>
<body>
<!-- multiple="multiple" : 允许多选 , size : 下拉列表长度 -->
<select name="one" multiple="multiple" size="8" id="one" style="width: 70px;">
<option value="语文">语文</option>
<option value="数学">数学</option>
<option value="英语">英语</option>
<option value="物理">物理</option>
<option value="化学">化学</option>
<option value="生物">生物</option>
</select>

<input type="button" value="把选中的右移" id="rightPart"></input>
<input type="button" value="全部右移" id="rightAll"></input>
<input type="button" value="把选中的左移" id="leftPart"></input>
<input type="button" value="全部左移" id="leftAll"></input>

<select name="two" multiple="multiple" size="8" id="two" style="width: 70px;"></select>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航