原生js實現城市列表三級聯動。

時間 2019-12-05

原文原文鏈接

1.原生js實現三級城市聯動css

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代碼中主要根據圖一中的數據格式。html