js select实现省市区联动选择

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;