js select实现省市区联动选择

最近整了一一些表单类的移动页面，遇到了一个省市区的联动选择，本来想着用公用库里面的以前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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。