下拉框的显示样式:
针对下拉框的绑定等操作时,在最后务必调用一次 form.render();
1、基本定义:
<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>
2、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 属性。
3、onChange 事件.
下拉框需要有 lay-filter 属性:
<select name="RegistrationCategoryParentId"
id="RegistrationCategoryParentId_searchForm"
lay-filter="RegistrationCategoryParentId_searchForm">
<option value=""></option>
</select>
js 监听:
// 备案大类 下拉框 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()
4、取值
取 value:$("#ddlAffectedArea_editForm").val()
取 text:$("#ddlAffectedArea_editForm").parent().find('.layui-anim').find('dd[class=layui-this]').text()
赋值:
$("#ddlAffectedArea_editForm").val(100);
5、禁用
$("#RegistrationCategoryParentId_editForm").attr('disabled', true);
form.render();
6、启用
$("#RegistrationCategoryParentId_editForm").attr('disabled', false);
或
$("#RegistrationCategoryParentId_editForm").removeAttr('disabled');
form.render();