ajax学习笔记4

来源：互联网发布：ubuntu删除软件命令编辑：程序博客网时间：2024/06/05 16:40

对select的应用：

首先select标签是一个下拉列表。在开发中应用很多。所以我们要了解一下selcet的属性，我通过将重一个select的元素移到另一个元素中去的列子来详细说明。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="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>

<selectmultiple="multiple"size="6"id="one">//multiple是多选，size是显示长度。

</select>

<inputtype="button"value="-->"id="button"/>

<selectmultiple="multiple"size="6"id="second">

</select>

</body>

</html>