layui下拉框动态加载

layui.use(['form', 'upload'] , function () {
    var $ = layui.jquery
        , upload = layui.upload
        , form = layui.form;
            $.get(ctx + '/???/???', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                        if (item.proType){
                            $html += "<option class='generate' value='" + item.id + "'>" + item.proType + "</option>";
                        }else{
                            $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                        }
                    });
                 $("select[name='???']").append($html);
                 //反选
                 $("select[name='???']").val($("#???").val());
                 //append后必须从新渲染
                 form.render('select');
             }
        })
})

你输入的可能是“layui下拉框对选中值进行操作”或“如何设置 layui 下拉框的选中项”。 --- ## ✅ 问题理解: 你想知道: - 如何 **设置 Layui 下拉框的默认选中值**; - 或者如何 **获取当前选中的值并进行处理**; - 或者如何 **根据某个值动态设置下拉框的选中项**。 --- ## ✅ 完整解决方案(含代码和说明) ### ✅ 示例 HTML 结构 ```html <div class="layui-form"> <select id="demoSelect" lay-filter="demoSelect"> <option value="">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select> </div> <button class="layui-btn" id="setSelected">设置选中值为 2</button> <button class="layui-btn" id="getSelected">获取当前选中值</button> ``` --- ### ✅ JavaScript 设置/获取选中值 ```html <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script> <script> layui.use('form', function(){ var form = layui.form; // 获取选中值 $('#getSelected').on('click', function () { var selectedVal = $('#demoSelect').val(); alert("当前选中值为:" + selectedVal); }); // 设置选中值 $('#setSelected').on('click', function () { $('#demoSelect').val(2); // 设置 value 为 2 的选项被选中 form.render('select'); // 刷新渲染 }); // 监听 select 的 change 事件 form.on('select(demoSelect)', function(data) { console.log('选中了:', data.value); }); }); </script> ``` --- ## ✅ 关键点说明: | 功能 | 方法 | |------|------| | 获取当前选中值 | `$('#selectId').val()` | | 设置选中值 | `$('#selectId').val('value')` | | 刷新样式 | `form.render('select')` | | 监听 change 事件 | `form.on('select(filterName)', fn)` | --- ## ✅ 动态加载数据后设置默认值示例 如果你是通过 Ajax 加载数据,可以这样使用: ```javascript $.getJSON('/api/getOptions', function(res) { var html = '<option value="">请选择</option>'; $.each(res, function(i, item) { html += '<option value="' + item.id + '">' + item.name + '</option>'; }); $('#demoSelect').html(html); $('#demoSelect').val(2); // 设置默认值 layui.form.render('select'); }); ``` ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蚕豆的生活

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值