省市選擇器

說明：根據選擇的省名，自動調用數據庫中的記錄，在指定的select元素中填充相應的城市名。城市數據庫也一併附上。

<div>
  <label for="province">所在地區</label>
  <select name="province" id="province">
  </select>
  <label for="city">城市</label>
  <select name="city" id="city">
  </select>
</div>

var address={'上海':['上海市'],'江蘇':["南京市", "無錫市", "徐州市", "常州市", "蘇州市", "南通市", "連雲港市", "淮安市", "鹽城市", "揚州市", "鎮江市", "泰州市", "宿遷市"],'浙江':["杭州市", "寧波市", "溫州市", "嘉興市", "湖州市", "紹興市", "金華市", "衢州市", "舟山市", "台州市", "麗水市"],'安徽':["合肥市", "蕪湖市", "蚌埠市", "淮南市", "馬鞍山市", "淮北市", "銅陵市", "安慶市", "黃山市", "滁州市", "阜陽市", "宿州市", "巢湖市", "六安市", "亳州市", "池州市", "宣城市"],'福建':["福州市", "廈門市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龍巖市", "寧德市"],'北京':['北京市'],'天津':['天津市'],'廣東':["廣州市", "韶關市", "深圳市", "珠海市", "汕頭市", "佛山市", "江門市", "湛江市", "茂名市", "肇慶市", "惠州市", "梅州市", "汕尾市", "河源市", "陽江市", "清遠市", "東莞市", "中山市", "潮州市", "揭陽市", "雲浮市"],'廣西':["南寧市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "欽州市", "貴港市", "玉林市", "百色市", "賀州市", "河池市", "來賓市", "崇左市"],'雲南':["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "麗江市", "思茅市", "臨滄市", "楚雄彝族自治州", "紅河哈尼族彝族自治州", "文山壯族苗族自治州", "西雙版納傣族自治州", "大理白族自治州", "德宏傣族景頗族自治州", "怒江傈僳族自治州", "迪慶藏族自治州"],'貴州':["貴陽市", "六盤水市", "遵義市", "安順市", "銅仁地區", "畢節地區", "黔西南布依族苗族自治州", "黔東南苗族侗族自治州", "黔南布依族苗族自治州"],'四川':["成都市", "自貢市", "攀枝花市", "瀘州市", "德陽市", "綿陽市", "廣元市", "遂寧市", "內江市", "樂山市", "南充市", "眉山市", "宜賓市", "廣安市", "達州市", "雅安市", "巴中市", "資陽市", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"],'內蒙古':["呼和浩特市", "包頭市", "烏海市", "赤峯市", "通遼市", "鄂爾多斯市", "呼倫貝爾市", "巴彥淖爾市", "烏蘭察布市", "興安盟", "錫林郭勒盟", "阿拉善盟"],'寧夏':["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛市"],'甘肅':["蘭州市", "嘉峪關市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平涼市", "酒泉市", "慶陽市", "定西市", "隴南市", "臨夏回族自治州", "甘南藏族自治州"],'重慶':['重慶市'],'江西':["南昌市", "景德鎮市", "萍鄉市", "九江市", "新餘市", "鷹潭市", "贛州市", "吉安市", "宜春市", "撫州市", "上饒市"],'黑龍江':["哈爾濱市", "齊齊哈爾市", "雞西市", "鶴崗市", "雙鴨山市", "大慶市", "伊春市", "佳木斯市", "七臺河市", "牡丹江市", "黑河市", "綏化市", "大興安嶺地區"],'吉林':["長春市", "吉林市", "四平市", "遼源市", "通化市", "白山市", "松原市", "白城市", "延邊朝鮮族自治州"],'遼寧':["瀋陽市", "大連市", "鞍山市", "撫順市", "本溪市", "丹東市", "錦州市", "營口市", "阜新市", "遼陽市", "", "盤錦市", "鐵嶺市", "朝陽市", "葫蘆島市"],'山東':["濟南市", "青島市", "淄博市", "棗莊市", "東營市", "煙臺市", "濰坊市", "", "濟寧市", "泰安市", "威海市", "日照市", "萊蕪市", "臨沂市", "德州市", "聊城市", "濱州市", "菏澤市"],'山西':["太原市", "大同市", "陽泉市", "長治市", "晉城市", "朔州市", "晉中市", "運城市", "忻州市", "臨汾市", "呂梁市"],'陝西':["西安市", "銅川市", "寶雞市", "咸陽市", "渭南市", "延安市", "漢中市", "榆林市", "安康市", "商洛市"],'河北':["石家莊市", "唐山市", "秦皇島市", "邯鄲市", "邢臺市", "保定市", "張家口市", "承德市", "滄州市", "廊坊市", "衡水市"],'河南':["鄭州市", "開封市", "洛陽市", "平頂山市", "安陽市", "鶴壁市", "新鄉市", "焦做市", "濟源市", "濮陽市許昌市", "漯河市", "三門峽市", "南陽市", "商丘市", "信陽市", "周口市", "駐馬店市"],'湖北':["武漢市", "黃石市", "十堰市", "宜昌市", "襄樊市", "鄂州市", "荊門市", "孝感市", "荊州市", "黃岡市", "", "咸寧市", "隨州市", "恩施土家族苗族自治州", "仙桃市", "潛江市", "天門市", "神農架林區"],'湖南':["長沙市", "株洲市", "湘潭市", "衡陽市", "邵陽市", "岳陽市", "常德市", "張家界市", "益陽市", "郴州市", "永州市", "懷化市", "婁底市", "湘西土家族苗族自治州"],'海南':["海口市", "三亞市", "五指山市", "瓊海市", "儋州市", "文昌市", "萬寧市", "東方市", "定安縣", "屯昌縣澄邁縣", "臨高縣", "白沙黎族自治縣", "昌江黎族自治縣", "樂東黎族自治縣", "陵水黎族自治縣", "保亭黎族苗族自治縣", "瓊中黎族苗族自治縣"],};
  (function($) {
    $(document).ready(function() {
      var $provinceList=$('#province'),$cityList=$('#city'),provinceHTML='';
      for(province in address){
          var html="<option value='"+province+"'>"+province+"</option>";
          provinceHTML+=html;
      }
      $provinceList.html(provinceHTML);
      $provinceList.on('click',function() {
        var province=$(this).val(),cityHTML='';
        for(city in address[province]){
          var html="<option value='"+address[province][city]+"'>"+address[province][city]+"</option>";
          cityHTML+=html;
        }
        $cityList.html(cityHTML);
      })
      $provinceList.triggerHandler('click');
  })
  })(jQuery)

須要改進的地方

• 沒有對blur事件作出相應(triggerHandler(click)函數無效)