DIV CSS 佈局教程網

最近整了一一些表單類的移動頁面，遇到了一個省市區的聯動選擇，本來想著用公用庫裡面的以前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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。