原生js实现城市列表三级联动。-CSDN博客

1.原生js实现三级城市联动

index.html

         <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>城市选择的三种实现</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div>
    <fieldset>
    <legend>方法一：下拉选择框实现省市区（县）三级联动</legend>
    <form action="#">
        <label for="addr-show">您选择的是：
            <input type="text" value="" id="addr-show">
            <input type="text" value="" id="addr-shows">
        </label>
        <br/>

        <!--省份选择-->
        <select id="prov" onchange="showCity(this)">
            <option>=请选择省份=</option>

        </select>

        <!--城市选择-->
        <select id="city" onchange="showCountry(this)">
            <option>=请选择城市=</option>
        </select>

        <!--县区选择-->
        <select id="country" onchange="selecCountry(this)">
            <option>=请选择县区=</option>
        </select>
        <button type="button" class="btn met1" onClick="showAddr()">确定</button>
    </form>
</fieldset>
</div>


<script src="city.js"></script>
<script src="methods.js"></script>
</body>
</html>
复制代码

methods.js //js文件

//****************针对第一种方式的具体js实现部分******************//
//****************所使用的数据是city.js******************//

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

var addrShow = $('addr-show');
var addrShows = $('addr-shows');
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]['cityName'];
        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');
           // console.log(provice[val]["city"][j].name,'provice[val]["city"][j].name');
            cityOpt.innerText = provice[val]["city"][j]["cityName"];
            cityOpt.value = j;
            city.appendChild(cityOpt);
        }
    }
}

// /*根据所选的城市来显示县区列表*/
function showCountry(obj) {
    var val = obj.options[obj.selectedIndex].value;
    current.city = val;
    console.log(current.city,'addrShow.value');
    if (val != null) {
        country.length = 1; //清空之前的内容只留第一个默认选项
        var countryLen = provice[current.prov]["city"][val].area.length;
      //  console.log(countryLen,'countryLen');
        if(countryLen == 0){
            addrShow.value = provice[current.prov].cityName + '-' + provice[current.prov]["city"][current.city].cityName;
           addrShows.value = provice[current.prov].cityCode + '-' + provice[current.prov]["city"][current.city].cityCode;
            return;
        }
       
        for (var n = 0; n < countryLen; n++) {
            var countryOpt = document.createElement('option');
            countryOpt.innerText = provice[current.prov]["city"][val]["area"][n]["cityName"];
            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].cityName + '-' + provice[current.prov]["city"][current.city].cityName + '-' + provice[current.prov]["city"][current.city]["area"][current.country].cityName;
        addrShows.value = provice[current.prov].cityCode + '-' + provice[current.prov]["city"][current.city].cityCode + '-' + provice[current.prov]["city"][current.city]["area"][current.country].cityCode;/此代码用作后台需要城市编码值可传后台
    }
复制代码

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;
}

/*方法二样式部分*/
#addr-choice{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 20px;
}

#title-wrap li,#addr-wrap li{
    list-style: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

#title-wrap li{
    width:163px;
    height: 45px;
    line-height: 45px;
    margin-bottom: 10px;
}

.titleSel{
    border-bottom: 2px solid #23B7E5;
}

#addr-wrap li{
    width: 83px;
    height: 30px;
    border-radius: 4px;
    line-height: 30px;
    font-size: 14px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
#addr-wrap li:hover{
    background-color: #23B7E5;
}

/*方法三样式部分*/
#data-wrap{
    border: 1px solid #ccc;
}
#data-order{
    height: 30px;
    background-color: #eee;
}
#data-order li{
    list-style: none;
    display: inline-block;
    text-align: center;
    width: 67px;
    font-size: 14px;
    line-height: 31px;
    cursor: default;
}

.cityOn{
    background-color: #fff;
}
#data-show{
    padding: 20px 10px;
}

#data-show dt{
    font-size: 14px;
    padding: 5px;
    color: #A5D2D5;
}
#data-show a{
    font-size: 12px;
    width: 38px;
    color: #513A08;
    padding: 5px;
    text-decoration: underline;
}

#data-show a:hover{
    color: #000;
    background-color: #A5D2D5;
    border-radius: 4px;
    cursor: pointer;
}
复制代码

city.js //最后附城市数据js文件格式

1.两张图片中数据格式均可用作代码中执行需手动做修改。
2.此js代码中主要根据图一中的数据格式。

图一

图二