简单二级级联菜单的实现
级联下拉菜单就是从一个下拉菜单中选中一项后，相应的另一个下拉菜单的内容会随之改变。
?
代码一：使用函数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 onload="createProvince()"> <form name="myform" > <select name="province" id="province" onchange="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 onload="createProvince()"> <form name="myform" > <select name="province" id="province" onchange="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属性的值。
?
?
?
?
?
?
?
?