本文介绍HTML中的Select元素及其属性，通过示例演示如何使用JavaScript操作Select元素，实现选项的移动及多选功能。
对select的应用：
首先select标签是一个下拉列表。在开发中应用很多。所以我们要了解一下selcet的属性，我通过将重一个select的元素移到另一个元素中去的列子来详细说明。
<!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>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("button").onclick = function() {//通过按钮来触发事件
var oneElement = document.getElementById("one");//获取第一个select元素节点
var twoElement = document.getElementById("second");
//获取第二个select元素节点
var optionElement = oneElement.getElementsByTagName("option");
//获取第一个select元素的option标签元素节点、
var len = optionElement.length;//这样可以得到option的长度
for ( var i = 0; i < len; i++) {//这样len就固定了，因为select是一个动态的数组。
if (oneElement.selectedIndex != -1) {//如果==-1说明没有选中元素
// alert(optionElement[oneElement.selectedIndex].value);//这个可以得到被选中元素的值
twoElement.appendChild(optionElement[oneElement.selectedIndex]);//将追加的元素移到第二个select中。*在多选情况下，只有移除，索引才会向下读，否则永远读的是第一个元素的值。
}
}
}
document.getElementById("one").ondblclick = function() {//这个是双击事件，双击选中元素也执行相同的操作。
var oneElement = document.getElementById("one");
var twoElement = document.getElementById("second");
var optionElement = oneElement.getElementsByTagName("option");
var len = optionElement.length;
for ( var i = 0; i < len; i++) {
if (oneElement.selectedIndex != -1) {
twoElement.appendChild(optionElement[oneElement.selectedIndex]);
}
}
}
}
</script>
</head>
<body>
<select multiple="multiple" size="6" id="one">//multiple是多选，size是显示长度。
<option>第一个</option>
<option>第二个</option>
<option>第三个</option>
<option>第四个</option>
<option>第五个</option>
<option>第六个</option>
</select>
<input type="button" value="-->" id="button" />
<select multiple="multiple" size="6" id="second">
</select>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
