JS实现省市区的三级联动

html代码:

省:<select id="city_1">
    <option>—请选择—</option>
</select>
市:
<select id="city_2">
    <option>—请选择—</option>
</select>
区:
<select id="city_3">
    <option>—请选择—</option>
</select>

js代码:

var Data = city[0];
var city1 = document.getElementById("city_1");
var city2 = document.getElementById("city_2");
var city3 = document.getElementById("city_3");
for (var key in Data) {
    /*var op=document.createElement("option");
     op.innerHTML=Data[key].name;
     op.setAttribute("value",1);
     city1.appendChild(op);*/
    var op = new Option(Data[key].name, key);
    city1.appendChild(op);
}
/*onchange 文本发生变化事件*/
var child;
city1.onchange=function (){
    city2.options.length=1;
    city3.options.length=1;
    var citynumber1=this.value;
    child=Data[citynumber1].child;
    for(var key in child){
        var op=new Option(child[key].name,key);
        city2.appendChild(op);
    }
}
city2.onchange=function (){
    city3.options.length=1;
    var citynumber2=this.value;
    var childData=child[citynumber2];
    for(var key in childData.child){
        var op=new Option(childData.child[key],key);
        city3.appendChild(op);
    }
}

cityData的数据格式如下(以山西省为例子):

var city = [
    {
        "140000": {
        "name": "山西省",
        "child": {
        "140100": {
            "name": "太原市",
            "child": {
                "140101": "市辖区",
                "140105": "小店区",
                "140106": "迎泽区",
                "140107": "杏花岭区",
                "140108": "尖草坪区",
                "140109": "万柏林区",
                "140110": "晋源区",
                "140121": "清徐县",
                "140122": "阳曲县",
                "140123": "娄烦县",
                "140181": "古交市"
            }
        },
        "140200": {
            "name": "大同市",
            "child": {
                "140201": "市辖区",
                "140202": "城区",
                "140203": "矿区",
                "140211": "南郊区",
                "140212": "新荣区",
                "140221": "阳高县",
                "140222": "天镇县",
                "140223": "广灵县",
                "140224": "灵丘县",
                "140225": "浑源县",
                "140226": "左云县",
                "140227": "大同县"
            }
        },
        "140300": {
            "name": "阳泉市",
            "child": {
                "140301": "市辖区",
                "140302": "城区",
                "140303": "矿区",
                "140311": "郊区",
                "140321": "平定县",
                "140322": "盂县"
            }
        },
        "140400": {
            "name": "长治市",
            "child": {
                "140401": "市辖区",
                "140402": "城区",
                "140411": "郊区",
                "140421": "长治县",
                "140423": "襄垣县",
                "140424": "屯留县",
                "140425": "平顺县",
                "140426": "黎城县",
                "140427": "壶关县",
                "140428": "长子县",
                "140429": "武乡县",
                "140430": "沁县",
                "140431": "沁源县",
                "140481": "潞城市"
            }
        },
        "140500": {
            "name": "晋城市",
            "child": {
                "140501": "市辖区",
                "140502": "城区",
                "140521": "沁水县",
                "140522": "阳城县",
                "140524": "陵川县",
                "140525": "泽州县",
                "140581": "高平市"
            }
        },
        "140600": {
            "name": "朔州市",
            "child": {
                "140601": "市辖区",
                "140602": "朔城区",
                "140603": "平鲁区",
                "140621": "山阴县",
                "140622": "应县",
                "140623": "右玉县",
                "140624": "怀仁县"
            }
        },
        "140700": {
            "name": "晋中市",
            "child": {
                "140701": "市辖区",
                "140702": "榆次区",
                "140721": "榆社县",
                "140722": "左权县",
                "140723": "和顺县",
                "140724": "昔阳县",
                "140725": "寿阳县",
                "140726": "太谷县",
                "140727": "祁县",
                "140728": "平遥县",
                "140729": "灵石县",
                "140781": "介休市"
            }
        },
        "140800": {
            "name": "运城市",
            "child": {
                "140801": "市辖区",
                "140802": "盐湖区",
                "140821": "临猗县",
                "140822": "万荣县",
                "140823": "闻喜县",
                "140824": "稷山县",
                "140825": "新绛县",
                "140826": "绛县",
                "140827": "垣曲县",
                "140828": "夏县",
                "140829": "平陆县",
                "140830": "芮城县",
                "140881": "永济市",
                "140882": "河津市"
            }
        },
        "140900": {
            "name": "忻州市",
            "child": {
                "140901": "市辖区",
                "140902": "忻府区",
                "140921": "定襄县",
                "140922": "五台县",
                "140923": "代县",
                "140924": "繁峙县",
                "140925": "宁武县",
                "140926": "静乐县",
                "140927": "神池县",
                "140928": "五寨县",
                "140929": "岢岚县",
                "140930": "河曲县",
                "140931": "保德县",
                "140932": "偏关县",
                "140981": "原平市"
            }
        },
        "141000": {
            "name": "临汾市",
            "child": {
                "141001": "市辖区",
                "141002": "尧都区",
                "141021": "曲沃县",
                "141022": "翼城县",
                "141023": "襄汾县",
                "141024": "洪洞县",
                "141025": "古县",
                "141026": "安泽县",
                "141027": "浮山县",
                "141028": "吉县",
                "141029": "乡宁县",
                "141030": "大宁县",
                "141031": "隰县",
                "141032": "永和县",
                "141033": "蒲县",
                "141034": "汾西县",
                "141081": "侯马市",
                "141082": "霍州市"
            }
        },
        "141100": {
            "name": "吕梁市",
            "child": {
                "141101": "市辖区",
                "141102": "离石区",
                "141121": "文水县",
                "141122": "交城县",
                "141123": "兴县",
                "141124": "临县",
                "141125": "柳林县",
                "141126": "石楼县",
                "141127": "岚县",
                "141128": "方山县",
                "141129": "中阳县",
                "141130": "交口县",
                "141181": "孝义市",
                "141182": "汾阳市"
             }
          }
       }
    },
  }
]  
发布了100 篇原创文章 · 获赞 8 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/Misnice/article/details/104427885