layui select 相关
 
<div class="layui-form" lay-filter="test">
    <select name="courseType" id="courseType" lay-filter="courseType"></select>
</div>
 
 
 
动态生成option
 
 
 let _html = ' ';
  for (const item of data) {
    //data-xxx为自定属性
    _html += `<option class="" data-disporder="${item.disporder}" data-id="${item.id}" data-type="${type}">${item.name}</option>`;
  }

  $("#courseType").append(_html);
  //动态追加之后需要渲染一下
  form.render("select");//或者 form.render()
 
 
 
渲染（动态添加opotion后）
 
 
 //刷新select选择框渲染
form.render('select');
 //刷新lay-filter="test"内select选择框渲染
form.render('select','test0);
 
 
 
获取指定option的所有属性值
 
 
//获取第一个option的value
//通过js
document.querySelector("#courseType").options[0].value;
//通过jq
$('#selects option:first').val();
$('#selects option:eq(0)').val();
$('#selects option').eq(0).val();

//获取第一个option的data-xxx的值
//第x个是eq(x)
let dataJson = $("#courseType option").eq(0)[0].dataset;
// dataJson
 {
  disporder: "0",
  id: "1",
  type: "yes"
 }

 let disporder = $("#courseType option").eq(0)[0].dataset.disporder;//"0"
 
 
 
监听下拉事件
 
 
form.on('select(courseType)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});
 
 
 
获取当前selected的值
 
 
  form.on('select(courseType)', function (data) {
    console.log(data.value); //得到被选中的value
    console.log(data.elem[data.elem.selectedIndex].id)//自定义的id
    console.log(data.elem[data.elem.selectedIndex].dataset.type)//自定义的type
    });
 
 
 
默认选中某项
 
 
   //1. 给option加上selected属性
    <option selected></option>;

   //2.直接给select赋值，然后重新渲染选择框：默认选中第x个
   $("#courseType").val($('#courseType option').eq(x).val())
   form.render("select");

注意渲染select标签的时间是否在表单生成之前，
 例如添加和修改时，
 需要在添加修改的表单渲染完成之后才能渲染select标签，
 另外不能忘记要加上
 form.render(“select”);
 来刷新渲染，否则也可能没有效果
 
// 显示编辑弹窗
    var showEditModel = function (data,status) {
        layer.open({
            type: 1,
            title: data ? '修改' : '添加',
            area: '500px',
            offset: '100px',
            content: $('#cell-model').html(),
            success: function () {
                admin.req(
                    "api-box/cellspec/list",
                    "",
                    function (data1) {
                        var source = data1.data;
                        for (var i = 0; i < source.length; i++) {
                            if (data == undefined) {
                                $("#cell-selector").append(
                                    "<option value='" +  source[i].id + "0'>" + source[i].aliasName + "</option>"
                                );
                            } else {

                                if (data.specId == source[i].id) {
                                    $("#cell-selector").append(
                                        "<option value='" +source[i].id + "' selected >" + source[i].aliasName + "</option>"
                                    );
                                } else {
                                    $("#cell-selector").append(
                                        "<option value='" + source[i].id +  "'>" + source[i].aliasName + "</option>"
                                    );
                                }
                            }
                        }
                        form.render("select");
                    },
                    "GET"
                );

                $('#cell-form')[0].reset();
                $('#cell-form').attr('method', 'POST');
                $("#id3").css('display', "none");
                $("#boxId").css('display', "none");
                $('#boId').val(document.getElementById('bId').value);
                $("#createUserName3").css('display', "none");
                $("#createTime3").css('display', "none");
                $("#updateUserName3").css('display', "none");
                $("#updateTime3").css('display', "none");
                if (data) {
                    $("#id3").css('display', "none");
                    $("#createUserName3").css('display', "none");
                    $("#createTime3").css('display', "none");
                    $("#updateUserName3").css('display', "none");
                    $("#updateTime3").css('display', "none");
                    form.val('cell-form', data);
                    $('#cell-form').attr('method', 'POST');
                }
                if (status == 1) {
                    $("#id3").css('display', '');
                    $("#createUserName3").css('display', '');
                    $("#createTime3").css('display', '');
                    $("#updateUserName3").css('display', '');
                    $("#updateTime3").css('display', '');
                    $('input').attr('disabled', 'disabled');
                    $('select').attr('disabled', 'disabled');
                    $(".model-form-footer").css('display', "none");
                } else {
                    $('input').attr('disabled', false);
                    $('select').attr('disabled', false);
                }
            }
        });
    };

 
  一定要包裹在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选择框渲染

        })