layui （省市区）三级联动

简介：公司写demo的时候写的一个，感觉挺有价值，做一个记录，需要的小伙伴可以下载看一下。

代码地址：https://github.com/shulongfei/layui_upload.git

git地址：[email protected]:shulongfei/layui_upload.git

效果图：

 1、添加html代码

<form class="layui-form">
  <div class="layui-form-item layui-row">
    <div class="layui-col-md4">
      <label class="layui-form-label">请选择省:</label>
      <div class="layui-input-block">
        <select name="quiz1" id="quiz1" lay-filter="test">
         
        </select>           
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label">请选择市:</label>
      <div class="layui-input-block">
        <select name="quiz2" id="quiz2" lay-filter="test1">
         
        </select>
      </div>
    </div>
    <div class="layui-col-md4">
      <label class="layui-form-label">请选择县/区:</label>
      <div class="layui-input-block">
        <select name="quiz3" id="quiz3">
          
        </select>
      </div>
    </div>
  </div>
</form>

2、数据格式和触发事件

var selDate = {
    "area":[
        {"regionName":'成华区',"regionCode":"001"},
        {"regionName":'武侯区',"regionCode":"002"},
        {"regionName":'青羊区',"regionCode":"003"},
        {"regionName":'高新区',"regionCode":"004"},
        {"regionName":'锦江区',"regionCode":"005"}
    ],
    "street":[
        {"regionName":'成华区1',"regionCode":"001"},
        {"regionName":'成华区2',"regionCode":"002"},
        {"regionName":'成华区3',"regionCode":"003"},
        {"regionName":'成华区4',"regionCode":"004"},
        {"regionName":'成华区5',"regionCode":"005"}
    ],
    "place":[
        {"regionName":'街道1',"regionCode":"001"},
        {"regionName":'街道2',"regionCode":"002"},
        {"regionName":'街道3',"regionCode":"003"},
        {"regionName":'街道4',"regionCode":"004"},
        {"regionName":'街道5',"regionCode":"005"}
    ]
};
// 一级联动事件触发
form.on('select(test)', function(data){
    var value = data.value;
    areaState.area.fn(value);
});

// 二级联动事件触发
form.on('select(test1)', function(data){
    var value = data.value;
    areaState.street.fn(value);
});

3、事件对象

var areaState = {
    area: {
        state: false,
        data: [],
        fn: function(value){ // value 表示的是区域代码，及传到后台的数据
            this.state = true; // 可能以后会用到
            areaState.street.state = false; // 可能以后会用到
            areaState.place.state = false; // 可能以后会用到
            
            // 从后台调用真实接口
            // get(function(data){
            //    areaState.street.data = data;
            //    console.log(areaState.street.data);
            //    addSelect('street select',areaState.street.data,false,'regionCode','regionName');
            // }

            areaState.street.data = selDate.street;
            if(value !== '') {
               addSelect('quiz2',areaState.street.data,true,'regionCode','regionName');
            } else {
              $('#quiz2').html('');
              $('#quiz3').html('');
              form.render("select");
            }
           
        }
    },
    street: {
        state: false,
        data: [],
        fn: function(value){
            this.state = true;
            areaState.place.state = false;

            areaState.place.data = selDate.place;
            if(value !== '') {
               addSelect('quiz3',areaState.place.data,true,'regionCode','regionName');
            } else {
              $('#quiz3').html('');
              form.render("select");
            }
        } 
    },
    place: {
        state: false,
        data: [],
        fn: function(){
            this.state = true;
        }
    }
};

4、数据默认加载

//select添加选项
function addSelect(id,data,bool,val,text,region){//bool是否添加“请选择”选项
  val = val || 'type';
  text = text || 'name';
  var d="'"+region+"'";
  var html = '';
  var $id = $('#'+id);
  $id.html('');
  if(bool){html += '<option value="">请选择</option>';}
  for(var i in data){
      html +='<option value="'+data[i][val]+'">'+data[i][text]+'</option>';      
  }
  $id.html(html);
  form.render("select");
}

addSelect('quiz1',selDate.area,true,'regionCode','regionName');

说明：这里没有做什么封装，数据灵活运用，加载方式可根据实际情况来定，demo里面的例子加上ajax请求即可实现联动效果。