二級聯動菜單

時間 2021-08-12

標籤 javascript html java ide 函數 htm 對象索引欄目 JavaScript 简体版

原文原文鏈接

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二級聯動菜單</title>
<script language="javascript">
function changeCity(){
  var aCity=new Array();
  aCity[0]=new Array("---請選擇城市---");
  aCity[1]=new Array("北京");
  aCity[2]=new Array("廣州","深圳","珠海","廈門");
  aCity[3]=new Array("長沙","株洲","衡陽","岳陽","張家界","永州");
  var province=document.getElementById("province");
  var provincedId=province.selectedIndex; //得到當前選擇省份的索引
  var cityLength=aCity[provincedId].length;//得到當前選擇省份的城市個數
  var city=document.getElementById("city");
  city.options.length=cityLength;  //設置城市列表框的選擇長度爲當前選擇省份的城市個數
  for(i=0;i<cityLength;i++){
   optonValue=aCity[provincedId][i];
   city.options[i]=new Option(optonValue,optonValue); //用構造函數Option來建立一個新的option對象
  }
  city.focus();

}

</script>

</head>

<body>
請選擇省份:
<select id="province" onchange="changeCity()">
<option>---請選擇省份---</option>
<option value="北京">北京</option>
<option value="廣東">廣東</option>
<option value="湖南">湖南</option>
</select>
<br />
<br />

請選擇城市:
<select id="city">
<option>---請選擇城市---</option>
</select>

</body>
</html>

for部分也可修改以下:

for(i=0;i<cityLength;i++){ city.options[i].text=aCity[provincedId][i]; city.options[i].value=aCity[provincedId][i]; }