组件 layui 常用控件下拉框的应用


下拉框的显示样式:

针对下拉框的绑定等操作时,在最后务必调用一次 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();
优质内容筛选与推荐>>
1、ubuntu搭配lamp
2、jdbc连接数据库使用sid和service_name的区别
3、记录下开通的第一天
4、stuts学习笔记
5、IDEA GIT 忽略文件


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号