基于javascript實現(xiàn)全國省市二級聯(lián)動下拉選擇菜單

更新時間：2016年01月28日 08:46:54 作者：gyz418

這篇文章主要介紹了基于javascript實現(xiàn)全國省市二級聯(lián)動下拉選擇菜單，以一個完整實例形式較為詳細(xì)的分析了js實現(xiàn)省市二級聯(lián)動下拉菜單的實現(xiàn)技巧，非常簡單實用,需要的朋友可以參考下

本文實例講述了js實現(xiàn)全國省市二級聯(lián)動下拉選擇菜單，分享給大家供大家參考。具體如下：

效果圖：

具體代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
//好像不是這樣子
var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省","河南省"];
var arr_city = [
    ["請選擇城市/地區(qū)"],
    ["東城區(qū)","西城區(qū)","朝陽區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺區(qū)","海淀區(qū)"],
    ['寶山區(qū)','長寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)','南匯區(qū)','徐匯區(qū)','盧灣區(qū)'],
    ['和平區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '河?xùn)|區(qū)', '紅橋區(qū)', '塘古區(qū)', '開發(fā)區(qū)'],
    ['俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)'],
    ['福田區(qū)', '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊'],
    ['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'],
    ['鄭州市']
   ];
//函數(shù)：當(dāng)省份中的option改變時，城市中的數(shù)據(jù)應(yīng)該相應(yīng)的改變
function select_change(index)
{
 var city = document.form1.city;
 //根據(jù)當(dāng)前index確定city中要寫入的二維數(shù)組是哪一個
 city.length = 0;
 city.length = arr_city[index].length;
 for(var i=0;i<arr_city[index].length;i++)
 {
  //創(chuàng)建每一個option對象(option標(biāo)記)
  city.options[i].text = arr_city[index][i];
  city.options[i].value = arr_city[index][i];
 }
}
//函數(shù)：給province對象添加option對象，每個option的內(nèi)容來自于arr_province
function init()
{
 //獲取province和city對象
 var province = document.form1.province;
 var city = document.form1.city;
 //指定下拉列表的高度，準(zhǔn)備寫入幾個option的標(biāo)記(很重要)
 province.length = arr_province.length;      //這句必須有
 //循環(huán)數(shù)組，將數(shù)組內(nèi)容寫入到province中去
 for(var i=0;i<arr_province.length;i++)
 {
  //創(chuàng)建每一個option對象(option標(biāo)記)
  province.options[i].text = arr_province[i];
  province.options[i].value = arr_province[i];
 }
 //指定省份當(dāng)前的默認(rèn)選中索引號
 var index = 0;
 province.selectedIndex = index;
 //對象city的內(nèi)容來自于province的選擇
 //我們默認(rèn)指定一個option，一般是下標(biāo)為0的那個
 city.length = arr_city[index].length;
 for(var j=0;j<arr_city[index].length;j++)
 {
  //創(chuàng)建每一個option對象(option標(biāo)記)
  city.options[j].text = arr_city[index][j];
  city.options[j].value = arr_city[index][j];
 }
}

</script>
</head>

<body onload="init()">
<form name="form1">
省份：<select name="province" onchange="select_change(this.selectedIndex)" style="width:130px;"></select>
城市：<select name="city"></select>
</form>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: