JS省市區聯動

龍恩0707發表於2014-09-27

JS省市區使用文件

一：伺服器返回JSON格式要求如下網址裡面data的格式：(拿KISSY元件data格式來做的)

http://gallery.kissyui.com/cityselector/doc/linkage-data.js

二：使用時，頁面head部分需要引入jquery和省市區JS，依賴於HTML結構如下：

屬性說明：

id：下拉框dom節點(頁面上是唯一的)，用於js初始化的鉤子。

data-code: 初始化頁面時可以根據省市區的編碼來指定那個省份，市及區來顯示。比如我想指定 "吉林省長春市朝陽區" 頁面預設顯示的話，我們可以在HTML結構上加相對應的data-code編碼來指定，比如如下：

頁面一開啟的時候如下顯示：

三：省市區JS初始化的方法如下：

var selectVal = new CitySelect({

data : data,

provId : "#prov4",

cityId : '#city4',

areaId : '#area4'

});

屬性說明如下：

data: data配置項是指後臺返回的json資料的儲存的全域性變數。

provId 指省份下拉框select的id。

cityId 指城市下拉框select的id。

areaId 指區下拉框select的id。

省市區id傳參方式：都是以 #XXX的.

省市區基本的配置項如下：

data: 指後臺返回的JSON資料。

provId：省份下拉框select的id。

cityId：指城市下拉框select的id。

areaId: 指區下拉框select的id。

isSelect: 預設為true 選擇第一項如果頁面有指定省市區項時，就顯示指定項。如果false，就選中 "請選擇"

provCallBack: 省份下拉框渲染完成後的回撥函式。

cityCallBack：市下拉框渲染完成後的回撥函式。

areaCallBack：區下拉框渲染完成後的回撥函式。

demo演示：

一：預設的HTML結構如下：

JS程式碼初始化的方式如下：

var selectVal = new CitySelect({
data : data,
provId : "#prov4",
cityId : '#city4',
areaId : '#area4'
});

開啟頁面後，頁面顯示如下：

1. 可以看到，頁面一開啟的時候預設顯示第一項北京，我們也可以根據省市區切換其他省份去，可以看到上面的gif圖時，下面的select中的屬性data-code也跟著變化，如果省份切換到請選擇下拉框時候，那麼省市區中的data-code變為-1，且市，區不可選擇，只能是請選擇下拉框。

2. 當有省份時候，我切換市到 "請選擇"項時候那麼區也變為請選擇相應的市和區 select中的data-code 值變為-1。其中data-code 就是form表單提交時候需要的。也就是說某某省份下的所有市和所有區。

3. 當同時有省，市的時候，我區也可以change，那麼當選擇其他的區的時候 data-code也同時變化，當切換到請選擇的時候那麼value為-1，也就是說是某某省某某市下面的所有區。

二：第二種就是假如頁面一初始化的時候我想指定某某省某某市某某區的時候，要如何編寫HTML結構呢，比如像下面的圖上一樣。

我們可以在select框加上data-code屬性來指定，如下：

注意：如果我指定了省份是：浙江省，市：不是浙江省裡面的市，那麼選中的市是浙江省的預設的第一個市，同理區也一樣。

三：第三種初始化是：通過配置項 isSelect 來配置的，預設此配置項為true，如果沒有指定省市區的話，那麼預設選種第一項，如果有指定省市區的話，那麼顯示指定的省市區。如果 isSelect 配置項為false的話，那麼預設顯示是請選擇下拉框。可以看下程式碼如下判斷！

我們也可以看看gif圖顯示的。

如上gif圖所示：預設顯示都是 "請選擇"下拉框，data-code都為-1，當選擇某某省時候 data-code值變化，但是相對應的 "市" 和 "區" 還是請選擇下拉框，同理當選中某項市的時候，select中的屬性data-code也相應的變化，但是區下拉框還是"請選擇"下拉框。當選擇區某項的時候 data-code也相應的變化。

JS初始化方式如下，只需要增加一個配置項 isSelect:false即可，如下：

var selectVa2 = new CitySelect({
data : data,
provId : "#prov5",
cityId : '#city5',
areaId : '#area5',
isSelect: false
});

下面是所有的HTML程式碼如下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script src="js/city2.js"></script>
  <script type="text/javascript" src="js/citySelect2.js"></script>
  <title>Document</title>
 </head>
 <body>

    <div id="city_4">
          <select class="prov" id="prov4" data-code ="220000"></select> 
        <select class="city" id="city4" data-code ="220100"></select>
        <select class="dist" id="area4" data-code ="220104"></select>
    </div>

    <div id="city_5">
          <select class="prov" id="prov5">
            
        </select> 
        <select class="city" id="city5"></select>
        <select class="dist" id="area5"></select>
    </div>
    <script>
            
            var selectVal = new CitySelect({
                data   : data,
                provId : "#prov4",
                cityId : '#city4',
                areaId : '#area4'
            });
            
                
            var selectVa2 = new CitySelect({
                data   : data,
                provId : "#prov5",
                cityId : '#city5',
                areaId : '#area5',
                isSelect: false
            });
            
    </script>
 </body>
</html>

View Code

javascript程式碼如下：

/**
 * Jquery省市區聯動程式碼重構
 * @version 0.0.2
 */

 function CitySelect(options) {
    this.config = {
         data             :      '',             // 資料
         provId           :      '',             // 省下拉框id容器 格式是 #XXX
         cityId           :      '',             // 市下拉框id容器 格式是 #XXX
         areaId           :      '',             // 區下拉框id容器 格式是 #XXX
         isSelect         :      true,           // 預設為true 選擇第一項 如果頁面有指定省市區項時，就顯示指定項。
                                                 // 如果false，就選中 "請選擇"
         provCallBack     :      null,           // 省份渲染完成後回撥
         cityCallBack     :      null,           // 市渲染完成後的回撥
         areaCallBack     :      null            // 區渲染完成後的回撥
    };
    this.config = $.extend(this.config, options || {});
    this.init();
 }

 CitySelect.prototype = {

    constructor: CitySelect,
    
    /*
     * 初始化方法init
     */
    init: function() {
        var self = this,
            _config = self.config;

        if(!/^#/.test(_config.provId)) {
            alert("省份ID傳的不正確,格式是 #XXX");
            return;
        }
        if(!/^#/.test(_config.cityId)) {
            alert("城市ID傳的不正確,格式是 #XXX");
            return;
        }
        if(!/^#/.test(_config.cityId)) {
            alert("區ID傳的不正確,格式是 #XXX");
            return;
        }
        this.provCode = $(_config.provId).attr("data-code");
        this.cityCode = $(_config.cityId).attr("data-code");
        this.areaCode = $(_config.areaId).attr("data-code");
        
        // 使省市區id (#XX --> XX)
        this.provid =  _config.provId.replace(/^#/g,'');
        this.cityid = _config.cityId.replace(/^#/g,'');
        this.areaid = _config.areaId.replace(/^#/g,'');

        // 渲染省份
        self._provFunc();

        //渲染省對應的市
        self._cityFunc();
        
        // 渲染省市 對應的區
        self._areaFunc();
        
        // 如果省份的值是-1的話 那麼設定省市區select都為-1
        var provFirstOpt = $(_config.provId).val();
        if(provFirstOpt == -1) {
            $(_config.provId).attr("data-code","-1");
            $(_config.cityId).attr("data-code","-1");
            $(_config.areaId).attr("data-code","-1");
        }
        // change事件 省切換 自動切換市 and 區 
        $(_config.provId).change(function(e){
            self._cityFunc();
            self._areaFunc();
        });

        // 市 change事件 自動切換區
        $(_config.cityId).change(function(e){
            self._areaFunc();
        });
        // 區change事件 
        $(_config.areaId).change(function(){
            $(_config.areaId).attr("data-code",$(this).val());
        });
    },
    /*
     * 渲染省資料
     * @method _provFunc {private}
     */
    _provFunc: function(){
        var self = this,
            _config = self.config;

        var elemHtml = '';
        elemHtml+= '<option value="-1" data-name="請選擇" selected>請選擇</option>';

        $(_config.data).each(function(i,curItem){
            elemHtml += "<option data-name='"+curItem[1]+"' value='"+curItem[0]+"'>"+curItem[1]+"</option>";
        });
        $(_config.provId).html(elemHtml);
        
        if(_config.isSelect) {
            $($(_config.provId + " option")[1]).attr("selected",'true');
            if(this.provCode) {
                self._setSelectCode(_config.provId,this.provCode);
            }
        }
        
        _config.provCallBack && $.isFunction(_config.provCallBack) && _config.provCallBack();
    },
    /*
     * 渲染省對應的市資料
     * @method _cityFunc {private}
     */
    _cityFunc: function(){
        var self = this,
            _config = self.config;

        var provIndex = $(_config.provId).get(0).selectedIndex,   // 獲取省份的索引index
            elemHtml = '',
            prov,
            citys,
            provOpt;
        
        provOpt = $($(_config.provId + ' option')[0]).attr("value");
        var opthtml = '<option value="-1" data-name="請選擇" selected>請選擇</option>';

        // 如果省有請選擇的話 那麼相應的省要減一
        if(provOpt == -1) {
            provIndex--;
        }
        $(_config.cityId).empty();
        $(_config.areaId).empty();
        /*
         * 如果選擇的是 第一項 "請選擇" 的話 那麼省市區的value都為-1
         * 並且預設選中市 區的第一項 請選擇option
         */
        if(provIndex < 0){
            $(_config.provId).attr("data-code",'-1');
            $(_config.cityId).attr("data-code",'-1');
            $(_config.areaId).attr("data-code",'-1');

            $(_config.cityId).html(opthtml);
            $(_config.areaId).html(opthtml);
            return;
        }
        prov = _config.data[provIndex];
        citys = prov[2];
        elemHtml += '<option value="-1" data-name="請選擇">請選擇</option>';
        for(var m = 0; m < citys.length; m++) {
            var oneCity = citys[m];
            elemHtml += "<option value='"+oneCity[0]+"' data-name='"+oneCity[1]+"'>"+oneCity[1]+"</option>";
        }
        $(_config.cityId).html(elemHtml);

        if(_config.isSelect) {
            $($(_config.cityId + " option")[1]).attr("selected",'true');
            if(this.cityCode) {
                self._setSelectCode(_config.cityId,this.cityCode);
            }
        }
        self._selectChangeCode();

        _config.cityCallBack && $.isFunction(_config.cityCallBack) && _config.cityCallBack();
    },
    /*
     * 渲染市對應的區資料
     * @method _areaFunc {private}
     */
    _areaFunc: function(){
        var self = this,
            _config = self.config;

        var    provOpt = $($(_config.provId + ' option')[0]).attr("value"),
            cityOpt = $($(_config.cityId + ' option')[0]).attr("value");

        var provIndex = $(_config.provId).get(0).selectedIndex,
            cityIndex = $(_config.cityId).get(0).selectedIndex,
            elemHtml = "",
            prov,
            citys,
            areas,
            oneCity;
        var opthtml = '<option value="-1" data-name="請選擇" selected>請選擇</option>';
        
        /*
         * 如果省選擇了 "請選擇了" 那麼省和市自動切換到請選擇 那麼相應的索引index-1
         * 如果省沒有選擇 "請選擇"，市選擇了 "請選擇" 那麼市的索引index - 1
         */
        if(provOpt == -1) {
            provIndex--;
            cityIndex--;

        }else if(provOpt != -1 && cityOpt == -1) {
            cityIndex--;
        }
        
        if(provIndex < 0 || cityIndex < 0){
            $(_config.cityId).attr("data-code",'-1');
            $(_config.areaId).attr("data-code",'-1');
            $(_config.areaId).html(opthtml);
            return;
        };
        prov = _config.data[provIndex];
        citys = prov[2];
        oneCity = citys[cityIndex];
        areas = oneCity[2];

        elemHtml += '<option value="-1" data-name="請選擇">請選擇</option>';
        if(areas != null) {
            for(var n = 0; n < areas.length; n++) {
                var oneArea = areas[n];
                elemHtml += "<option value='"+oneArea[0]+"' data-name='"+oneArea[1]+"'>"+oneArea[1]+"</option>";
            }
            
        }
        $(_config.areaId).html(elemHtml);
        
        if(_config.isSelect) {
            $($(_config.areaId + " option")[1]).attr("selected",'true');
            if(this.areaCode) {
                self._setSelectCode(_config.areaId,this.areaCode);
            }
        }
        self._selectChangeCode();

        _config.areaCallBack && $.isFunction(_config.areaCallBack) && _config.areaCallBack();
    },
     /*
     * 根據change事件來改變省市區select下拉框的data-code的值 
     * @method _changeSetCode private
     * @param selectId 省市區select dom節點
     */
    _changeSetCode: function(selectId){
        var self = this,
            _config = self.config;
        var idx = selectId.selectedIndex, //獲取選中的option的索引
            option,
            value,
            dataValue = $(_config.provId).val();
        var html = "<option data-name='請選擇' value='-1' selected>請選擇</option>",
            provOpt = $($(_config.provId + ' option')[0]).attr("value");

        if(idx > -1) {
            if(dataValue == -1) {
                if(provOpt != "-1") {
                    $(_config.provId).prepend(html);
                    $(_config.cityId).prepend(html);
                    $(_config.areaId).prepend(html);
                }
                $(_config.provId).attr("data-code",'');
                $(_config.cityId).attr("data-code",'');
                $(_config.areaId).attr("data-code",'');
            }else {
                option = selectId.options[idx];  //獲取選中的option元素
                value = $(option).val();
                $(selectId).attr("data-code",value);
            }
        }
    },
    _selectChangeCode: function(){
        var self = this,
            _config = self.config;

        // 省change事件時候 省select下拉框data-code也要變化
        var provId = document.getElementById(this.provid);
        self._changeSetCode(provId);

        // 市change事件時候 市select下拉框data-code也要變化
        var cityId = document.getElementById(this.cityid);
        self._changeSetCode(cityId);
        
        // 區change事件時候 市select下拉框data-code也要變化
        var areaId = document.getElementById(this.areaid);
        self._changeSetCode(areaId);
    },
     /*
     * 根據下拉框select屬性data-code值 來初始化省下拉框的值
     * @method _setSelectCode {private}
     * @param selectId 下拉框的Id
     */
    _setSelectCode: function(selectId,code){
        var self = this,
            _config = self.config;
            
        var optionElems = $(selectId + " option");
        
        $(optionElems).each(function(index,item){
            var curCode = $(item).val();
            if(curCode == code) {
                $(item).attr("selected",'true');
                $(selectId).attr("data-code",curCode);
                return;
            }
        });
    }
 };

View Code

JS省市區demo下載

JS省市區聯動效果
2014-02-23
JS
js頁面展示省市聯動
2016-10-08
JS
vue 省市區三級聯動外掛
2024-04-24
Vue
用Vue實現省市區三級聯動
2017-12-14
Vue
中國省市區街道四級聯動地區選擇元件
2018-03-28
元件
微信小程式-收貨地址省市區聯動元件
2020-10-20
微信小程式元件
Android省市區三級聯動控制元件
2017-01-05
Android控制元件
基於ThinkPHP+AJAX的省市區三級聯動
2016-03-03
PHP
基於layui的省市區三級聯動（資料互動）
2018-09-18
UI
符合 iview 資料規則的省市區三級聯動
2018-07-11
View
原生javascript製作省市區三級聯動詳細教程
2021-01-17
JavaScript
jquery省市區三級聯動外掛CitySelect教程
2016-02-20
jQuery
UIPikerView 省市區三聯滑動，解決滑動崩潰問題
2018-03-19
UIView
vue+webpack+amaze-vue實現省市區聯動選擇元件
2017-12-11
VueWeb元件
用Vue、element-ui、axios實現省市區三級聯動
2019-01-07
VueUIiOS
2024中國行政區域含港澳臺【省市區縣鎮鄉村】五級聯動地址json資料
2024-03-19
JSON
js省市級聯選單程式碼例項
2017-04-15
JS
三級聯動省市區城市地區選擇器v2.1.0新版本釋出
2017-11-07
[外掛擴充套件]中國省市區鄉鎮四級聯動外掛修改...
2020-04-04
套件
jQuery實現省市區三級聯動完整版原始碼演示下載
2016-12-23
jQuery原始碼
jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果
2016-10-14
jQueryJSON
JavaScript 省市級聯效果
2018-12-31
JavaScript
[Dcat 擴充套件] dcat-distpicker 省市區三級聯動選擇元件擴充
2022-06-12
套件元件
小白前端進階模組1————國省市縣聯動
2019-01-29
前端
knockout.js 省、市、區三級聯動
2018-07-27
JS
DactAdmin 省市區元件
2021-10-26
元件
資料分享 — 省市區街道社群 5 級聯動資料 ---- 送演示 ---- 送服務端程式
2018-04-05
服務端
javascript讀取以json形式儲存的省市級聯效果
2017-02-02
JavaScriptJSON
JavaScript 省市級聯選單原理
2019-05-18
JavaScript
JavaScript省市級聯效果詳解
2018-12-31
JavaScript
Java 快遞地址自動識別地址省市區、手機號、姓名，地址自動補全省市區速度高達1萬/秒
2024-03-28
Java
Flutter城市(省市區)選擇器
2019-09-19
Flutter
利用JavaScript實現註冊頁面省市聯動效果（附程式碼）
2018-11-23
JavaScript
一個省市縣三級聯動的回顯（帶資料庫）
2016-06-18
資料庫
Voyager 級聯選擇器外掛，可以方便的維護省市區資訊
2020-02-24
JavaScript省市級聯選單原理詳解
2018-02-22
JavaScript
js二級聯動
2019-01-16
JS
最最最簡單從政府官方獲取最新省市縣聯動資料
2020-11-29

JS省市區聯動

相關文章