首先layui是什么？

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

(官方解释！！！)

下拉框绑定数据：

Html代码：

上图是使用layui做出来的下拉框。

js代码：

Form.render(); 这是layui下拉框绑定的特别之处。

别的下拉框绑定是不需要这句的代码的。

比如：Bootstrap框架。

但是layul框架没有这句代码layul的下拉框是绑定不上数据的。

控制器代码：

下拉框回填数据：

layui的下拉框回填与绑定一样要使用form.render() 加载表格。

layui的下拉框回填与别的框架还有一点不同的。

就是要写在  下拉框绑定请求成功时的调用回调函数中（如上图所示）。

下面是一个layui下拉框的绑定和回填的一个封装函数。

function dropDownbox(selectId, url, form, value) {

    //下拉框绑定

    $.post(url, function (jsonData) {

        //当用户传过来的ID值不带#号时，为标量拼接上#号

        if (selectId.indexOf('#') != 0) {

            selectId = '#' + selectId;

        }       

        //创建option

        for (var k in jsonData) {

            $(selectId).append('<option value="' + jsonData[k].value + '">' + jsonData[k].text + '</option>');

        }      

        //设置选中值

        if (value != undefined && value != null && value != '') {

            $(selectId).val(value);

        }

        //重新加载

        form.render();

    })

}

////dropDownbox(selectId, url, form, value)

selectId是id;

url是控制器路径;

form是form.render();

value是下拉框的回填值（可空）；

　　今天要做一个二级联动的下拉框，看了LayUI的文档，感觉应该很容易。

 　　与联动下拉框相关的html文件主要内容：

    <div class="layui-form-item">
        <label class="layui-form-label">联系单位</label>
        <div class="layui-input-inline">
			  <button class="layui-btn layui-btn-primary demo2" >
				<label id="outUnit">请选择工作联系单位</label>
				<i class="layui-icon layui-icon-down layui-font-12"></i>
			  </button>			
        </div>
        <label class="layui-form-label">实施人员</label>
        <div class="layui-input-inline">
			  <button class="layui-btn layui-btn-primary demo3" >
				<label id="outUnitMember">请选择实施人员</label>
				<i class="layui-icon layui-icon-down layui-font-12"></i>
			  </button>									
        </div>
    </div>

　　JavaScript内容：

	var arrOutUnitList = [];
	var arrOutUnitMemberList = [];
	
	layui.use(['dropdown', 'util', 'layer', 'table','form'], function(){
	  var dropdown = layui.dropdown
	  ,layer = layui.layer
	  ,$ = layui.jquery
	  ,form=layui.form;
	  
		$.ajax({
			url:'getOutUnitList.php',
			type:'POST',
			success:function (data) {
				for (var i in data) {
					arrOutUnitList.push(data[i]);    
				}
			}
		});
	  
	  //下拉列表的赋值
	  dropdown.render({
		elem: '.demo1'
		,data: [
			{title: '日常维护',id: 101},
			{title: '定期巡检',id: 102},
			{title: '数据处理',id: 103},
			{title: '帐号权限',id: 104},
			{title: '视频会议',id: 105},
			{title: '网络运维',id: 106},
			{title: '耗材购置',id: 107},
			{title: '其他工作',id: 108},
			]
		,click: function(obj){
			document.getElementById('workType').innerHTML=obj.title;
		},
	  })
	  
	  dropdown.render({
		elem: '.demo2',
		data: arrOutUnitList,
		click: function(obj){
			document.getElementById('outUnit').innerHTML=obj.title;
			arrOutUnitMemberList = [];
			$.ajax({
				url:'getOutUnitMemberList.php',
				data:"C01="+obj.title,
				type:'POST',
				async:false,
				success:function (data) {								
					for (var i in data) {
						arrOutUnitMemberList.push(data[i]);
					}
				}
			});
											
		}
	  })
	  
	  dropdown.render({
		elem: '.demo3'
		,data: []
		,click: function(obj){
			document.getElementById('outUnitMember').innerHTML=obj.title;
		    //layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
		}
	  })	  
	  
	});

　　本以为就搞定了，可是点击联系单位后，实施人员下拉框就是不显示，太奇怪了！

　　让组件重新渲染也不行。

　　那就初始化不赋值了，改变赋值位置，就是将实施人员的赋值在联系单位下拉框的点击事件里：

	  dropdown.render({
		elem: '.demo2',
		data: arrOutUnitList,
		click: function(obj){
			document.getElementById('outUnit').innerHTML=obj.title;
			arrOutUnitMemberList = [];
			$.ajax({
				url:'getOutUnitMemberList.php',
				data:"C01="+obj.title,
				type:'POST',
				async:false,
				success:function (data) {								
					for (var i in data) {
						arrOutUnitMemberList.push(data[i]);
					}
				}
			});
            //将实施人员下拉框的赋值放到这里，并且删除它的初始化赋值
			dropdown.render({
				elem: '.demo3',
				data: arrOutUnitMemberList,
				click: function(obj){
					document.getElementById('outUnitMember').innerHTML=obj.title;
				}
			});
		}
	  })

　　可以显示了，问题又来了！只能显示一次的点击。就是第一此点击联系单位，选择一个单位后，对应的实施人员可以显示出来了，可是再次换单位，实施人员的下拉框不变化了！

　　怎么会这么奇怪？看官网文档，也没有这方面的说明，这么优秀的一个框架怎么会出现这样的问题？

　　折腾了4个小时，投降了，换成select好操作一些。

　　HTML部分更改为：

    <div class="layui-form-item">
        <label class="layui-form-label">联系单位</label>
        <div class="layui-input-inline">
            <select name="outUnitList" id="outUnitList" lay-filter="outUnitList">
				<option value=""></option>
			</select>

        </div>
        <label class="layui-form-label">实施人员</label>
        <div class="layui-input-inline">
            <select name="outUnitMember" id="outUnitMember">
				<option value=""></option>
			</select>
        </div>
    </div>

　　Javascript部分更改为：

		$.ajax({
			url:'getOutUnitList.php',
			type:'POST',
			success:function (data) {
				for (var i in data) {
					arrOutUnitList.push(data[i]);
					$('#outUnitList').append(new Option(data[i], data[i]));	
				}
				form.render('select');
			}
		});
	  
	  //下拉列表的赋值
	  dropdown.render({
		elem: '.demo1'
		,data: [
			{title: '日常维护',id: 101},
			{title: '定期巡检',id: 102},
			{title: '数据处理',id: 103},
			{title: '帐号权限',id: 104},
			{title: '视频会议',id: 105},
			{title: '网络运维',id: 106},
			{title: '耗材购置',id: 107},
			{title: '其他工作',id: 108},
			]
		,click: function(obj){
			document.getElementById('workType').innerHTML=obj.title;
		},
	  });
 
	 form.on('select(outUnitList)', function(data){
		 var selectUnitName = data.value; //选择的单位名称
		 // console.log(selectUnitName);
		 $.ajax({
			 url: 'getOutUnitMemberList.php',
			 data:"C01="+selectUnitName,
			 dataType: 'json',
			 type: 'post',
			 success: function (returnData) {
				 $('#outUnitMember').empty();
				// for (var i in returnData) {
				// 	$('#outUnitMember').append(new Option(returnData[i], returnData[i]));	
				// }
				 $.each(returnData, function (index, value) {
					 $('#outUnitMember').append( new Option(value, value) );
				 });
				 form.render('select');
			 }
		 });
	 });

　　php获取实施人员：

<?php
require 'DRlinkConfig.php';
$C01 = $_POST['C01'];
$sql = "select * from droutunitmemberlist where c01='$C01'";
$res = $mysqli->query($sql);
$returnReslut = array();
while ($row = $res->fetch_array()){	
	array_push( $returnReslut,$row['C03']);
}
header('Content-type:text/json');
echo json_encode($returnReslut);
$res->free();
$mysqli->close();
?>

　　解决两个下拉框联动的问题了。

　　今天遇到的这个问题真感到奇怪。

• 设置必选；下拉框选中事件；动态插入数据；重新渲染；不想渲染
•  设置必须时 lay-verify="required"，必须设置默认值为空value=""

• <select name="select_store_id" lay-verify="required"  lay-filter="select_store_id">
      <option value="">请选择一个门店</option>
  </select>
  

  layui.form.on('select(select_store_id)', function (data) {
   console.log(data.value);
  })

  $.each(e.result.list, function(i,item){
      var store_opn = '<option value="'+item.store_id+'" >'+item.title+'</option>';
      $("#prize_store_id").append(store_opn);
  });

  form.render("select");

  <select lay-ignore  name="select_store_id" lay-verify="required"  lay-filter="select_store_id" >
      <option value="">请选择一个门店</option>
  </select>