JS省市區聯動

時間  2019-12-08
標籤 省市區 聯動 欄目 JavaScript 简体版
原文   原文鏈接

JS省市區使用文檔javascript

  一：服務器返回JSON格式要求以下網址裏面data的格式：(拿KISSY組件data格式來作的)html

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

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

        <select  id="prov4" data-code="220000"></select>json

        <select  id="city4" data-code="220300"></select>服務器

        <select  id="area4" data-code="220322"></select>dom

        屬性說明：ide

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

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

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

          頁面一打開的時候以下顯示：

         

   三：省市區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結構以下： 

         <select class="prov" id="prov4"></select>
         <select class="city" id="city4"></select>
         <select class="dist" id="area4"></select>

   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下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程