移動局の原生のselectは省市区の連動選択を実現する

最近いくつかのフォーム類の移動ページを整理して、1つの省市区の連動選択に出会って、もともと公用庫の中の以前の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 = ''">'+(that.default === undefined ?''" selected ="selected">'+that.itemName[that.index]+' ' : '');

        for (var k in data) {

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

        }
        html += '';    
        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;iif(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コード:

type="hidden" name="defaultArea" value="" id="default-area" >  //   ，           
class="area-container" data-default="">