Free and Susan
js 省市下拉列表聯動
1.定義 城市 數據數組
2.得到 當前 所選擇 的 省
3.得到 當前省 在 城市數組中的位置
4.得到 當前省 所轄制的 地市
5.填充 城市 下拉選單
----------
示例代碼如下
2.得到 當前 所選擇 的 省
3.得到 當前省 在 城市數組中的位置
4.得到 當前省 所轄制的 地市
5.填充 城市 下拉選單
----------
示例代碼如下
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
//定義 城市 數據數組
cityArray = new Array();
cityArray[0] = new Array("河南省","鄭州市|開封市|洛陽市|平頂山市|安陽市|鶴壁市|新鄉市|焦作市|濮陽市|許昌市|漯河市|三門峽市|南陽市|商丘市|信陽市|周口市|駐馬店市|濟源市");
cityArray[1] = new Array("雲南省","昆明市|大理市|曲靖市|玉溪市|昭通市|楚雄市|紅河市|文山市|思茅市|西雙版納市|保山市|德宏市|麗江市|怒江市|迪慶市|臨滄市");
cityArray[2] = new Array("其它","其它");
function getCity(currProvince)
{
//當前 所選擇 的 省
var currProvince = currProvince;
var i,j,k;
//清空 城市 下拉選單
document.all.selCity.length = 0 ;
for (i = 0 ;i <cityArray.length;i++)
{
//得到 當前省 在 城市數組中的位置
if(cityArray[i][0]==currProvince)
{
//得到 當前省 所轄制的 地市
tmpcityArray = cityArray[i][1].split("|")
for(j=0;j<tmpcityArray.length;j++)
{
//填充 城市 下拉選單
document.all.selCity.options[document.all.selCity.length] = new Option(tmpcityArray[j],tmpcityArray[j]);
}
}
}
}
</script>
</head>
<body>
<form id="form1">
<select id="selProvince" onChange = "getCity(this.options[this.selectedIndex].value)">
<option value="">-請選擇-</option>
<option value="河南省">河南省</option>
<option value="雲南省">雲南省</option>
<option value="其它">其它</option>
</select>
<select id="selCity">
<option>-城市-</option>
</select>
</form>
</body>
</html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
//定義 城市 數據數組
cityArray = new Array();
cityArray[0] = new Array("河南省","鄭州市|開封市|洛陽市|平頂山市|安陽市|鶴壁市|新鄉市|焦作市|濮陽市|許昌市|漯河市|三門峽市|南陽市|商丘市|信陽市|周口市|駐馬店市|濟源市");
cityArray[1] = new Array("雲南省","昆明市|大理市|曲靖市|玉溪市|昭通市|楚雄市|紅河市|文山市|思茅市|西雙版納市|保山市|德宏市|麗江市|怒江市|迪慶市|臨滄市");
cityArray[2] = new Array("其它","其它");
function getCity(currProvince)
{
//當前 所選擇 的 省
var currProvince = currProvince;
var i,j,k;
//清空 城市 下拉選單
document.all.selCity.length = 0 ;
for (i = 0 ;i <cityArray.length;i++)
{
//得到 當前省 在 城市數組中的位置
if(cityArray[i][0]==currProvince)
{
//得到 當前省 所轄制的 地市
tmpcityArray = cityArray[i][1].split("|")
for(j=0;j<tmpcityArray.length;j++)
{
//填充 城市 下拉選單
document.all.selCity.options[document.all.selCity.length] = new Option(tmpcityArray[j],tmpcityArray[j]);
}
}
}
}
</script>
</head>
<body>
<form id="form1">
<select id="selProvince" onChange = "getCity(this.options[this.selectedIndex].value)">
<option value="">-請選擇-</option>
<option value="河南省">河南省</option>
<option value="雲南省">雲南省</option>
<option value="其它">其它</option>
</select>
<select id="selCity">
<option>-城市-</option>
</select>
</form>
</body>
</html>