JS下拉选择框实现省市区（县）三级联动

来自网络：

https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new

效果图

 

实现

项目结构：

city.js

https://blog.csdn.net/qq_26416195/article/details/81114888

index.html

    
    
    



    

        

            您选择的是：
                
            
            


            
            
                =请选择省份=

            

            
            
                =请选择城市=
            

            
            
                =请选择县区=
            
            确定
        
    

method.js

/*根据id获取对象*/
function $(str) {
    return document.getElementById(str);
}

var addrShow = $('addr-show');
var btn = document.getElementsByClassName('met1')[0];
var prov = $('prov');
var city = $('city');
var country = $('country');


/*用于保存当前所选的省市区*/
var current = {
    prov: '',
    city: '',
    country: ''
};

/*自动加载省份列表*/
(function showProv() {
    btn.disabled = true;
    var len = provice.length;
    for (var i = 0; i < len; i++) {
        var provOpt = document.createElement('option');
        provOpt.innerText = provice[i]['name'];
        provOpt.value = i;
        prov.appendChild(provOpt);
    }
})();

/*根据所选的省份来显示城市列表*/
function showCity(obj) {
    var val = obj.options[obj.selectedIndex].value;
    if (val != current.prov) {
        current.prov = val;
        addrShow.value = '';
        btn.disabled = true;
    }
    //console.log(val);
    if (val != null) {
        city.length = 1;
        var cityLen = provice[val]["city"].length;
        for (var j = 0; j < cityLen; j++) {
            var cityOpt = document.createElement('option');
            cityOpt.innerText = provice[val]["city"][j].name;
            cityOpt.value = j;
            city.appendChild(cityOpt);
        }
    }
}

/*根据所选的城市来显示县区列表*/
function showCountry(obj) {
    var val = obj.options[obj.selectedIndex].value;
    current.city = val;
    if (val != null) {
        country.length = 1; //清空之前的内容只留第一个默认选项
        var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
        if (countryLen == 0) {
            addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
            return;
        }
        for (var n = 0; n < countryLen; n++) {
            var countryOpt = document.createElement('option');
            countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
            countryOpt.value = n;
            country.appendChild(countryOpt);
        }
    }
}

/*选择县区之后的处理函数*/
function selecCountry(obj) {
    current.country = obj.options[obj.selectedIndex].value;
    if ((current.city != null) && (current.country != null)) {
        btn.disabled = false;
    }
}

/*点击确定按钮显示用户所选的地址*/
function showAddr() {
    addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name + '-' + provice[current.prov]["city"][current.city].districtAndCounty[current.country];
}

style.css

/*全局样式*/
* {
    margin: 0;
    padding: 0;
}

fieldset {
    width: 500px;
    padding: 20px;
    margin: 30px;
    border: 1px solid #ccc;
}

legend{
    font-size: 18px;
    font-weight: bold;
}

#addr-show, #addr-show02,#addr-show03{
    width: 200px;
    height: 25px;
    margin-bottom: 10px;
}

.btn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    background-color: #aaa;
    margin: 0 20px;
}

.btn:disabled{
    background-color:#ccc;
}


select {
    width: 120px;
    height: 30px;
}