layui select 编辑 初始化赋值

 

点击编辑按钮时候需要根据id 来判断当前选择的是什么内容  以检测项目为例

<form class="layui-form" action="">
                    <div class="layui-input-block input_block">
      <select name="city" lay-verify="required" lay-filter="monitor" id="editSelect">
<!--       <option value="">请选择检测项目</option>-->
<!--                                <option value="1">红外测温</option>-->
<!--                                <option value="2">紫外</option>-->
<!--                                <option value="3">GIS局放</option>-->
<!--                                <option value="4">开关柜局放</option>-->
<!--                                <option value="5">高频局放</option>-->
<!--                                <option value="6">其他</option>-->
      </select>
    </div>
                        </form>
//检测项目

                    const detection = [
                        {id:'',name:'请选择检测项目'},
                        {id:1,name:'红外测温'},
                        {id:2,name:'紫外'},
                        {id:3,name:'GIS局放'},
                        {id:4,name:'开关柜局放'},
                        {id:5,name:'高频局放'},
                        {id:6,name:'其他'},
                    ]

$("#editSelect").html(' '); //清空
const  jianceId = res.info.jiancexiangmu_id;//检测项目id
					//检测项目
                    detection.map(function (item,index) {
                        if (item.id == jianceId){
                            $("#editSelect").append("<option value="+item.id+" selected='' >"+item.name+"</option>")
						}else {
                            $("#editSelect").append("<option value="+item.id+">"+item.name+"</option>")
						}

                    });




    //重新渲染表单
        function renderForm() {
            layui.use('form', function () {
                var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
                form.render();
            });
        }

//监听select
        layui.use('form', function () {
              var form = layui.form;
              form.on('select(monitor)', function (data) {
                console.log(data.value); //得到被选中的值
                val = data.value;
            });

         })

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui是一个简单易用的前端UI框架,其中包含了很多常用的组件,其中之一就是select(选择器)。 在Layui中,通过select组件可以实现下拉列表的选择功能。要赋值select组件,可以使用Layui中的form模块的setValue方法。 首先,需要在页面中引入Layui的相关资源文件,包括Layui的CSS样式文件和JavaScript脚本文件。 接下来,在HTML代码中创建一个select元素,并给它一个唯一的ID,以便后续使用。例如: ```html <select id="selectDemo"></select> ``` 然后,在JavaScript代码中调用Layui的form模块的setValue方法来给select赋值。例如: ```javascript layui.use('form', function(){ var form = layui.form; // 赋值 var data = [ {value: '1', text: '选项1'}, {value: '2', text: '选项2'}, {value: '3', text: '选项3'} ]; form.val('selectDemo', data[0].value); // 选中第一个选项 }); ``` 上述代码中,'selectDemo'是之前给select元素定义的ID,data是一个数组,包含需要赋值的选项的数据。然后,使用form.val方法将第一个选项的值赋给select元素。这样,即可通过Layuiselect组件实现赋值功能。 需要注意的是,要使用Layui的form模块的setValue方法,首先需要通过layui.use方法引入form模块。另外,select元素的ID必须与setValue方法中的参数保持一致。 总之,通过Layuiselect组件赋值是一个简单的过程,只需要使用form模块的setValue方法即可实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值