下拉框的显示样式:javascript
针对下拉框的绑定等操做时,在最后务必调用一次 form.render();
一、基本定义:java
<div class="layui-form-item"> <label class="layui-form-label"><span class="f_orange">*</span>控件类型</label> <div class="layui-input-block width_250 pos-r"> <select name="DataType" id="ddlDataType_searchForm" lay-verify="required"> <option value=""></option> </select> </div> </div>
二、Json 数据绑定(如下为 Ajax 成功后的回调函数):函数
success: function (result) { console.info("init_parentCategoryList 获取成功,返回的数据为:↓ "); console.info(result); if (result.Status) { result.Data.splice(0, 0, { ItemCode: "", ItemName: "--所有--" }); test.addOption({ selector: '#ddlDataType_searchForm', //选择器 data: result.Data, key: "ItemCode", value: "ItemName", isSelected: false, selectedValue: '', }); form.render(); test.selectMove(); } }
须要预加载 layui.use(['form', 'test'], function () { }); 这两个插件。
若是要默认选中某一项,就将 isSelected 设置为 true,同时把 value 值给 selectedValue 属性。ui
三、onChange 事件.
下拉框须要有 lay-filter 属性:this
<select name="RegistrationCategoryParentId" id="RegistrationCategoryParentId_searchForm" lay-filter="RegistrationCategoryParentId_searchForm"> <option value=""></option> </select>
js 监听:spa
// 备案大类 下拉框 onchange 事件 function onchange_RegistrationCategoryParentId_searchForm() { form.on('select(RegistrationCategoryParentId_searchForm)', function (data) { parentItemCode = data.value; var itemList = $.linq.where(categoryList, function (v) { return v.CategoryCode == parentItemCode; }); itemList.splice(0, 0, { Id: "", FullName: "--所有--" }); test.addOption({ selector: '#RegistrationCategoryId_searchForm', data: itemList, key: "Id", value: "FullName" }); form.render(); test.selectMove(); }); }
'select()'的参数就是对应 lay-filter 属性的值。插件
获取 value:data.value 获取 text :$(data.othis[0].innerHTML).find('dd[class=layui-this]').text()
四、取值code
取 value:$("#ddlAffectedArea_editForm").val() 取 text:$("#ddlAffectedArea_editForm").parent().find('.layui-anim').find('dd[class=layui-this]').text()
赋值:orm
$("#ddlAffectedArea_editForm").val(100);
五、禁用blog
$("#RegistrationCategoryParentId_editForm").attr('disabled', true); form.render();
六、启用
$("#RegistrationCategoryParentId_editForm").attr('disabled', false); 或 $("#RegistrationCategoryParentId_editForm").removeAttr('disabled'); form.render();