js select实现省市区联动选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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;