JavaScript實現省市縣三級級聯特效，javascript省市

JavaScript實現省市縣三級級聯特效，javascript省市

本文執行個體為大家分享了js省市縣三級級聯特效的實現代碼，供大家參考，具體內容如下

主要思想

1.省改變，市改變，並初始化縣
2.市改變，縣改變

html代碼

<select id="sheng"> <option value="">--請選擇--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option> <option value="3">內蒙古自治區</option></select><select id="shi"> <option value="">--請選擇--</option></select><select id="xian"> <option value="">--請選擇--</option></select>

主要步驟

1.擷取元素對象

var sheng = document.getElementById('sheng');var shi = document.getElementById('shi');var xian = document.getElementById('xian');

2.定義市和縣的數組

  var city = [   ['昌平區', '海澱區', '朝陽區', '東城區'],   ['石家莊市', '保定市', '張家口市', '唐山市'],   ['太原市', '大同市', '運城市', '臨汾市'],  ['呼和浩特市', '包頭市', '鄂爾多斯市', '赤峰市'] ];  var xians = [  [    ['北七家','回龍觀','霍營'],    ['中關村','蘇州街','西二旗'],    ['朝陽1','朝陽2','朝陽3'],    ['東城1','東城2','東城3'],  ],  [   ['新華區','橋東區','橋西區'],   ['高碑店','白溝','定興'],  ] ];

3.定義全域變數

var index = null;

4.實現省份改變，市跟著變化的效果

sheng.onchange = function() {   xian.innerHTML = '<option value="">--請選擇--</option>';// 初始化xian   index = this.value; // 擷取option的值   var result = city[index];//根據index去city數組中擷取對應的shi   // 將擷取的結果顯示在select#shi中，迴圈result數組中的"每一個值"，在值的兩側加上option標籤   var str = '<option value="">--請選擇--</option>';   for (var i = 0; i < result.length; i++) {   // 將所有的拼接好的市再次拼接為一個整體   str += '<option value="'+i+'">' + result[i] + '</option>';   }   shi.innerHTML = str;//將字串寫入到select#shi中 }

5.實現市改變，擷取縣城的效果

shi.onchange = function(){ var value = this.value; // 擷取當前的value值   var county = xians[index][value]; // 根據市擷取市對應的縣 var str = '<option value="">--請選擇--</option>'; for (var i = 0; i < county.length; i++) {  str += '<option value="'+i+'">' + county[i] + '</option>'; } xian.innerHTML = str;//將資料寫入到select#xian中}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。