先看一下效果图
然后是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
</style>
</head>
<body>
<select id="select1" onchange="test(this.value);" style="width:100px" ><!--通过onchange设置选定事件-->
<option value="0">--请选择--</option>
<option value="a1">逗比</option>
<option value="a2">大逗比</option>
<option value="a3">小逗比</option>
<option value="a4">逗比逗比</option>
</select>
<select id="select2" style="width:100px" onchange="">
</select>
</body>
<script type="text/javascript">
var arr=new Array(4);
arr[0]=["a1","是你1","是你2","是你3","是你4"];
arr[1]=["a2","是你45","是你454","是你6","是你47"];
arr[2]=["a3","是你456","是你6456","是你645","是你78"];
arr[3]=["a4","是你767","是你454","是你786","是你44"];
/*
1.遍历数组，得到第一个元素
2.判断val的值与第一个是否相等
3.相等后，获取数组后面的元素
4.得到select2的id
5.创建子节点option，添加过去appendChild
*/
function test(val){
var aaa=document.getElementById("select2");
var bbb=aaa.getElementsByTagName("option");
for(var m=0;m<bbb.length;m++){
var op=bbb[m];
aaa.removeChild(op);
m--;
/*由于如果不每次进行删除，那么
第二个下拉框里的option就会进行叠加，把上一个的元素叠加进去
因此，每次在第一个下拉框中进行选择后，都要进行判断，把第二个下拉框里存在的option删除；
同样需要注意m--；以及删除要从父节点开始删除子节点
*/
}
for(var i=0;i<arr.length;i++)
{
var arr1=arr[i];
var arr11=arr1[0];
if(val==arr11)
{
var aaa=document.getElementById("select2");
for(var j=1;j<arr1.length;j++){
var b1=arr1[j];
var option1=document.createElement("option");
var text1=document.createTextNode(b1);
option1.appendChild(text1);
aaa.appendChild(option1);
}
}
}
}
</script>
</html>
实现这个需要注意的一些都在注释里，另外感觉子节点创建删除这些，需要再看一下
var aaa=document.getElementById("select2");
var bbb=aaa.getElementsByTagName("option");
for(var m=0;m<bbb.length;m++){
var op=bbb[m];
aaa.removeChild(op);
m--;}子节点删除，从父节点入手；然后是在对象里创建标签创建option标签
var option1=document.createElement("option");创建标签
var text1=document.createTextNode(b1);创建文本
option1.appendChild(text1);将文本和标签连接起来
aaa.appendChild(option1);最后就可以导入到对象里
时间： 2024-11-03 22:16:43