zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    ubuntu下手动安装autoconf
    解决VMware下的ubuntu桌面鼠标键盘失效的问题
    DP搬运工1
    把数字转换成货币格式
    指定字符隐藏
    JS 时间获取 (常用)
    electron 安装
    el-form表单校验包含循环
    算法-07| 动态规划
    纯手撸——归并排序
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/14516863.html
Copyright © 2011-2022 走看看