【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动态生成下拉框:

WebForm.aspx:
<form id="form1" runat="server" lay-filter="FormData" class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">品牌名称</label>
        <div class="layui-input-inline" style="width: 150px;">
            <select name="sltBrandName" id="sltBrandName" lay-filter="sltBrandName" lay-search>
                <option value="" selected="selected">全部</option>
                <%=strBrandID%>
            </select>
        </div>
    </div>
</form>


WebForm.aspx.cs:
public string strBrandID = string.Empty;
//品牌名称
DataTable dtBrand = Ruby_BLL.CakeMerge.CakeMap.GetBrands();
strBrandID = Options.MakeOptions("", "", "brandID", "brandName", dtBrand.Rows);

/// <summary>
/// 生成select中的option项
/// </summary>
/// <param name="defalutValue">默认选中项的值</param>
/// <param name="defaultText">默认选中项的文本</param>
/// <param name="value">值的字段</param>
/// <param name="text">文本的字段</param>
/// <param name="rows">数据源</param>
/// <returns></returns>
public static string MakeOptions(string defalutValue, string defaultText, string value, string text, DataRowCollection rows)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    //设置下拉框选中项(一般value都是空的)
    if (!String.IsNullOrEmpty(defalutValue) || !String.IsNullOrEmpty(defaultText))
    {
        sb.Append("<option  selected=\"selected\" value=\"").Append(defalutValue).Append("\">").Append(defaultText).Append("</option>");
    }
    

    foreach (DataRow row in rows)
    {
        if ((!String.IsNullOrEmpty(defalutValue) || !String.IsNullOrEmpty(defaultText)) && ((defalutValue == row[value].ToString()) && (defaultText == row[text].ToString())))
        {
            sb.Append("<option  selected=\"selected\" value=\"").Append(defalutValue).Append("\">").Append(defaultText).Append("</option>");
        }
        else
        {
            sb.Append("<option value=\"").Append(row[value]).Append("\">").Append(row[text]).Append("</option>");
        }
    }
    return sb.ToString();
}
View Code

select标签清空处理:

//将select赋值为空
$("#selectId").val('');

//将form表单重新渲染
var form = layui.form;
form.render();

 

问题描述:

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

部分代码截图:

<div class="layui-inline">
    <label class="layui-form-label">标签类型:</label>
    <div class="layui-input-inline" style="width: 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>

 

posted @ 2021-03-11 11:33  智者见智  阅读(686)  评论(0编辑  收藏  举报