级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变。
代码一:使用函数createProvince()加载第一列表框中的值,onchange属性加载相应的第二个列表框中的值
<html>
<head>
<title> new document </title>
<script language="javascript">
function createProvince(){
var provinces = ['--请选择省份--','北京市', '福建省', '湖北省']; //所有省份的数组
var province=document.myform.province; //获取文档中省份这个列表框元素对象
for(var i = 0; i < provinces.length; i++){
province.options.add(new Option(provinces[i], provinces[i])); //往省份的选项组中添加选项
}
}
function createcity(){
var citylist = new Array();
citylist['--请选择省份--'] = ['--请选择城市--'];
citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔'];
citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
//获得选中的省份值
var selectedProv=document.myform.province.value;
var cityOption;
//清空城市列表框中原来的所有选项
document.myform.city.options.length=0;
//添加对应省份的所有城市
for (var city = 0; city < citylist[selectedProv].length; city++) {
cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]); //构造选项
document.myform.city.options.add(cityOption);
}
}
</script>
</head>
<body οnlοad="createProvince()">
<form name="myform" >
<select name="province" id="province" οnchange="createcity()">
</select>
<select name="city" id="city">
<option>--请选择城市--</option>
</select>
</form>
</body>
</html>
代码2.直接将值写入第一个列表框,用函数createcity()加载相应的第二个列表框中的值
<html>
<head>
<title> 级联菜单测试2 </title>
<script language="javascript">
function createcity(){
var citylist = new Array();
citylist['--请选择省份--'] = ['--请选择城市--'];
citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔'];
citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
//获得选中的省份值
var selectedProv=document.myform.province.value; //value值,只能是option中的value属性值,与<option></option>中的值没有关系,其只作为一个文本内容来显示,而不作为有效的参数。
var cityOption;
//清空城市列表框中原来的所有选项
document.myform.city.options.length=0;
//添加对应省份的所有城市
for (var city = 0; city < citylist[selectedProv].length; city++) {
cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]); //构造选项
document.myform.city.options.add(cityOption);
}
}
</script>
</head>
<body οnlοad="createProvince()">
<form name="myform" >
<select name="province" id="province" οnchange="createcity()">
<option value="--请选择省份--">--请选择省份--</option>
<option value="北京市">北京市</option>
<option value="福建省">福建省</option>
<option value="湖北省">湖北省</option>
</select>
<select name="city" id="city">
<option>--请选择城市--</option>
</select>
</form>
</body>
</html>
通过以上的对比可以发现,<option value=“value”></option>标签中的文本只是作为文本显示,而有效的参数值是value属性的值。