LayUI⑵：下拉列表的常用操作

　　1、下拉列表select的赋值与取值操作

//固定值：
<div class="layui-input-inline">
	<select id="Dc08" name="Dc08" lay-filter="outUnitList">
		<option value="日常维护">服务</option>
		<option value="定期巡检">物质采购</option>
		<option value="数据处理">工程</option>
	</select>
</div>
 
//动态赋值：
<label class="layui-form-label">输入样式</label>
<div class="layui-input-inline">
	<select id="Dc06" lay-filter="Dc06">
		<option value=""></option>
	</select>
</div>
//使用ajax进行赋值,
$.ajax({
	url:'ZTBHTTemplateBookmarkSet.php',
	data:{"op":"样式"},
	type:'POST',
	success:function (JsonData) {
		for(var i=0;i<JsonData.data.length;i++){
			$('#Dc06').append(new Option(JsonData.data[i].c01, JsonData.data[i].c01));						
		}					
		form.render('select');
	}
});				
//监听样式选择下拉列表的点击事件
form.on('select(Dc06)', function(data){
	// let curSelectStyle = data.value; //选择的单位名称
	$.ajax({
		url:'ZTBHTTemplateBookmarkSet.php',
		data:{"op":"样式明细",
			"styleName":data.value},
		type:'POST',
		success:function (JsonData) {
			$('#Dc07').empty();//下拉列表的清空
			// $('#Dc05').val(Init_c05);//更改下拉框的选择项目
			for(var i=0;i<JsonData.data.length;i++){
				$('#Dc07').append(new Option(JsonData.data[i].c02, JsonData.data[i].c02));						
			}					
			form.render('select');
		}
	});							 
})

　　2、在包含记录的表格窗口中单击列表的行进行编辑，打开一个窗口后需要根据给定值进行下拉框的初始化。

　　表格所在窗口的代码：

	var index = layer.open({
		title: '修改设备基础数据',
		type: 2,
		shade: 0.2,
		maxmin:true,
		shadeClose: true,
		area: ['100%', '100%'],
		content: 'baseEquipment_edit.html',
		success: function (layero, index) {						
			let childBody = layer.getChildFrame('body', index);//找到它的子窗口的body
			let iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象
			childBody.contents().find("#C01").val(data['C01']);
            //......
			childBody.contents().find("#C14").val(data['C14'].substring(0,10));
            //......
			childBody.contents().find("#C24").val(data['C24']);
			childBody.contents().find("#HideC25").val(data['C25']);
			// var childFrom = layer.getChildFrame('#BaseEquipment_edit', index);//获取子窗口的form
			// childFrom.render('select');
			iframe.layui.form.render(); //页面渲染
			//保留原值
			 window["layui-layer-iframe" + index].initData();
		}					
	});

　　打开后的操作，如果下拉框的选项是固定的则不需要额外的操作，如果是动态的则需要。

　　可以添加隐藏域，也可以使用变量代替，这里使用了隐藏域。

        <label class="layui-form-label">所属单位</label>
		<input type="hidden" name="HideC25" id="HideC25">
        <div class="layui-input-inline">
			<select lay-filter="C25_List" id="C25" name="C25">
			</select>            
        </div>		

　进行下拉列表的初始化：　

	var Init_C03;
    //......
	var Init_C25;		

	function initData(){
		//保留原值
		Init_C03=document.getElementById('C03').value;
        //......
		Init_C25=document.getElementById('HideC25').value;								
	}

    //得到单位名称列表		
	$.ajax({
			url:'EisGetDepartmentList.php',
			type:'POST',
			success:function (data) {
				var DepartmentList=data.data;
				for (var i in DepartmentList) {
					$('#C25').append(new Option(DepartmentList[i]['C02'], DepartmentList[i]['C02']));	
				}
				$("#C25").val(Init_C25);
				form.render('select');
			}
	});