（案例）两级联动下拉列表

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

//表单

<form name="form">
<select name="select1"  onchange="slct(this.selectedIndex)"><!--onchange事件，当下拉框默认值发生变化时。传进去默认的索引值-->
</select>
=>
<select name="select2">
</select>
</form>
</body>

</html>

//JS

<script language="javascript">
var arr1=["1~10","11~25","26~30","31~50","51~75"];//定义一维数组数据放在第一个下拉列表里面
var arr2=[ //定义二维数组数据放在第二个下拉列表里面
["1","2","3","4","5","6","7","8","9","10"],
["11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
["26","27","28","29","30"],
["31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"],
["51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75"]
];
var select1obj=document.form.select1;
var select2obj=document.form.select2;//获取两个select对象
var len=arr1.length; //获得一维数组的个数
select1obj.length=len; //创建等量的空的option
for(var i=0;i<len;i++){ //循环把一维数组数据放入option，没有空的option就无法放入数据
select1obj.options[i].text=arr1[i];
}
var len1=arr2[0].length; //获得二维数组下标为0的个数
//select1obj.selectedIndex=0;
select2obj.length=len1; //创建等量的空的option
for(var i=0;i<len1;i++){ //循环放入二维数组下标为0的数据
select2obj.options[i].text=arr2[0][i];
}
function slct(n){ //当下拉列表默认值改变时执行的函数的，形参n代表索引值
select1obj.selectedIndex=n; //第一个下拉列表索引值为选定的值
select2obj.selectedIndex=0; //第二个下拉列表索引值为0
var len1=arr2[n].length; //获取二维数组每个下标的个数
select2obj.length=arr2[n].length; //创建相应的空的option
for(var i=0;i<len1;i++){ //循环把相应的值放进去
select2obj.options[i].text=arr2[n][i];
}
}
</script>

posted @ 2017-05-21 22:08  安晓宇  阅读(206)  评论(0)    收藏  举报