简略二级级联菜单的实现 _Web前端

简单二级级联菜单的实现

级联下拉菜单就是从一个下拉菜单中选中一项后，相应的另一个下拉菜单的内容会随之改变。

代码一：使用函数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属性的值。