layui select 动态渲染 监听事件

  一定要包裹在form表单中 如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能

 <form class="layui-form" action="" style="display: flex">
                        
                            <div class="layui-form-item">
                                <label class="layui-form-label">电压等级</label>
                                <div class="layui-input-block">
                                    <select name="city" lay-verify="required" id="leave" lay-filter="leave">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">设备状态</label>
                                <div class="layui-input-block">
                                    <select name="city" lay-verify="required" id="status" lay-filter="status">

                                    </select>
                                </div>
                            </div>
                            <button style="margin-left: 20px" type="button" class="layui-btn submit">确认</button>
                        </form>
<!--设备状态-->
<script type="text/html" id="statusList">
    <option value="">请选择设备状态</option>
    {{each}}
    <option value="{{$value.id}}">{{$value.ziduan_name}}</option>
    {{/each}}
</script>
 //重新渲染表单
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
                form.render();
            });
        }

  //设备状态 我这里用的arttempalte 来渲染数据的
        function statusList () {
            let url1 = api.ziduanlist;
            let data1 = {
                token: localStorage.getItem('token'),
                type:4,
                page:-1,
                pagecount:0
            }
            Ajax(url1,data1,function (res) {
                console.log('字段列表'+res)
                if (res.errorCode == 0){
                    var tem_name = 'statusList';
                    var tem_html = template(tem_name, res.info.list);
                    $("#status").html(tem_html);
                  
                    renderForm(); //公共方法 动态赋值后重新渲染一下 不然显示不出来内容
                }else {
                    alert(res.errorValue);
                }
            })
        }
        statusList();
 //监听select
        layui.use('form', function () {
            var form = layui.form;
           
            form.on('select(status)', function (data) { // 监听select  lay-filter="status" 为status的值
                console.log(data.value); //得到被选中的值
                shebeizhuangtai_ids = data.value;

            });
         

            form.render('select'); //刷新select选择框渲染

        })

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值