【LayUi】下拉框

动态生成下拉框:

<!-- html页面 -->
<form>
    垃圾名称:
    <div class="layui-inline">
        <select id="refusename" name="refusename">
            <option value="">全部</option>
        </select>
    </div>
</from> 
<!-- JS代码 -->
<script type="text/javascript">
layui.use(['form', 'table', "laydate", 'layer'], function () {
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    
    $.ajax({
        //动态获取下拉选项的接口,返回数据主要是id+name
        url: '/refuse-web/admin/getRefuseName',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            let str="<option value=''>全部</option>";
            for(let i of data){
                //组装数据
                str+=`<option value='${i.id}'>${i.name}</option>`;
            }
            //jquery赋值方式
            $("#refusename").html(str);
            //重新渲染生效
            form.render();
        }
    });
}
</script>
View Code

问题描述:

aspx页面下拉框控件,触发变更事件时无效。

部分代码截图:

<div class="layui-inline">
    <label class="layui-form-label">标签类型:</label>
    <div class="layui-input-inline" style=" 218px;">
        <asp:DropDownList ID="ddlLabelType" runat="server" OnSelectedIndexChanged="ddlLabelStatus_SelectedIndexChanged" AutoPostBack="true">
            <asp:ListItem Text="全部" Value=""></asp:ListItem>
            <asp:ListItem Text="口味" Value="1"></asp:ListItem>
            <asp:ListItem Text="主题" Value="0"></asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<asp:Button ID="btnSelect" runat="server" Text="查 询" OnClick="btnSelect_Click" CssClass="layui-btn layui-btn-normal" />

JS代码部分:

<script type="text/javascript"> 
    var form;
    $(function () { 
        layui.use(['form', 'laydate'], function () {
            form = layui.form;
            form.on('select', function (data) {
                $('#btnSelect').trigger('click')
            })

            form.render(); 
        }) 
    })
</script>
原文地址:https://www.cnblogs.com/zhaoyl9/p/14516863.html