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>
  • 相关阅读:
    [C++]C++11右值引用
    [cocos2d-x]registerScriptHandler和registerScriptTapHandler区别
    [深度探索C++对象模型]关于成员初始化列表(member initiallization list)
    [深度探索C++对象模型]memcpy和memset注意事项
    sql server isnull函数
    sql server 数据类型
    sql server SQL 服务器
    案例:按钮拖动移动
    PHP 随笔记
    laravel5 事务回滚
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/14516863.html
Copyright © 2011-2022 走看看