ajax学习笔记4

发布时间：2020-12-16 01:01:11 所属栏目：百科来源：网络整理

导读：对select的应用：首先 select 标签是一个下拉列表。在开发中应用很多。所以我们要了解一下 selcet 的属性，我通过将重一个 select 的元素移到另一个元素中去的列子来详细说明。 ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww

对select的应用：

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

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

<html>

<head>

<title>Insert title here</title>

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是显示长度。

</select>

<input type="button" value="-->" id="button" />

</select>

</body>

</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!