【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>
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(); }
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>