最近整了一一些表單類的移動頁面，遇到了一個省市區的聯動選擇，本來想著用公用庫裡面的以前pc端的省市區選擇元件，但是發現pc端的效果在手機端用效果太不理想，設計沒給出具體的設計效果，只好自己整了select原生的省市區選擇效果，樣式使用手機自帶的效果，感覺樣式效果湊合還能用，資料還是用的pc的資料，只是把元件的給重寫了一下，程式碼效果如下：

var $ = require('jquery'),
    $window = $(window),
    data = require('./data-new'),
    $doc = $(document);

var __DEFAULTS__ = {
    wrap:''
 
,
    itemName: ['省', '市', '區/縣'],
    items: ['province', 'city', 'area'],
    callback: function(field, index) {} // 點選切換得時候才會執行

};


 function Area(options){
     options = $.extend({}, __DEFAULTS__, options);
     var that = this;
     that.wrapper = $(options.wrap);
     that.selectArr = that.wrapper.data('default'
 
)?that.wrapper.data('default').split(','):[110000,110100,110101]; //
     that.items = options.items;
     that.itemName = options.itemName;
     that.callback = options.callback;
     that.setValue();
     that.events();
     that.default = that.wrapper.data('default'); //預設輸出省市區的id
     that.validinput =  $("#default-area"
 
);
     var validval =  that.default!==undefined?that.default:'';
     that.validinput.val(validval);

 }

Area.prototype = {
    constructor: Area,
    //建立select，輸出相應的資料
    createItems:function(itemname,data,selectId){
        var that = this;
        //如果預設的defalut值沒輸出，則預設的給select新增相應的填寫提示
        var html = '<select name="'+itemname+'">'+(that.default === undefined ?'<option value="'+itemname+'" selected ="selected">'+that.itemName[that.index]+'</option> ' : '');

        for (var k in data) {

            html += '<option value ="'+ data[k].id +'"'+(selectId === data[k].id ? 'selected = "selected"' : '')+'>' + data[k].name + '</option>';

        }
        html += '</select>';    
        return html;
    },
    //設定初始值
    setValue:function(){
        var that = this,
            html = '';

        $.each(that.selectArr,function(index,k){
            that.index = index;
             html += that.createItems(that.items[index],that.getData(that.items[index],that.selectArr[index-1]),k);

        })
        that.wrapper.append(html)

    },
    //獲取資料
    getData: function(type, pid) {

        if (type === 'province') {
            return data.provinces || [];    // 省份資訊不需要pid
        }

        if (type === 'city') {
            return data.cities[pid] || [];
        }

        if (type === 'area') {
            return data.areas[pid] || [];
        }
    },
     //獲取select索引值
    getItemIndex:function(type){
        var that = this;
        for(var i= 0,l = that.items.length;i<l;i++){
            if(that.items[i] == type){
                return i;
            }
        }

    },
    //觸發change時候，select下一位值重新初始化
    setItemVal:function(select){

        var that = this;
        var $this = select,
            previd = $this.val(),
            $type =$this.attr('name'),
            $nxtType = '';

        if($type!='area'){

            $nxtType = that.items[that.getItemIndex($type)+1];

            var data = that.getData($nxtType,previd),
                html = that.createItems($nxtType,data,previd),
                nextSelect =  $('select[name="'+$nxtType+'"]');

            if($this.siblings('select[name="'+$nxtType+'"]').length>0){
                nextSelect.remove();
            }
            $this.after(html);
            nextSelect.find('option:first').prop('selected',true);
            $('select[name="'+$nxtType+'"]').trigger('change');
        } else{

            that.validinput.val($this.val()).trigger('validate')
        }
        that.index = that.getItemIndex($type);
        //觸發change後可以設定回撥函式
        if (that.callback) {
            that.callback.call(this, select, that.getItemIndex($type));
        }

    },
    events:function(){
        var that = this;
        //select  change事件
        $doc.on('change','.area-container select',function(){
            that.setItemVal($(this));

        })
    }
}

module.exports = Area;

html程式碼：

<input type="hidden" name="defaultArea" value="" id="default-area" >  //必填項，為了新增驗證觸發驗證用
<div class="area-container" data-default=""></div>