精华内容
下载资源
问答
  • layui select 相关

    2020-10-21 12:24:00
    layui select 相关 <div class="layui-form" lay-filter="test"> <select name="courseType" id="courseType" lay-filter="courseType"></select> </div> 动态生成option let _...

    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");
    
    展开全文
  • layui select 不展示

    2020-05-29 14:27:40
    注意渲染select标签的时间是否在表单生成之前, ...来刷新渲染,否则也可能没有效果 // 显示编辑弹窗 var showEditModel = function (data,status) { layer.open({ type: 1, title: data ? '修改' : '添加',

    注意渲染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-...

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

     

     

    展开全文
  • layui select 清空 插件

    千次阅读 2020-07-30 10:26:24
  • laui treetable获取选中项 /** 获取treetable 选中项 */ ... var check = layui.treetable.all('checked').data; var str = ""; for (var i in check){ str+=check[i].id; str+...
  • Layui表格刷新(重载)

    千次阅读 2020-08-24 11:29:45
    一、表格刷新1、表格容器定义2、添加、编辑、删除 刷新1)、刷新时不保留搜索框的搜索信息2)、刷新时保留搜索框的搜索信息二、搜索按钮刷新1、搜索按钮2、刷新方式三、官方文档 一、表格刷新 1、表格容器定义 <...
  • layui.form; var layer = layui.layer, //layer初始化 form = layui.form, //表单初始化 element = layui.element, table = layui.table; form.render(); mian();//这个是数据表格 var ...
  • layui中,hide,show是无法使用的,form.render(‘select’)的时候,select中display=none已经添加上去。但是渲染的时候,显示是用dl+div渲染显示的。 不起作用,没用,hide后,前台依旧显示。也不想通过ajax请求...
  • 确实拼接到了select下,但是并没有被layui将vue的数据渲染出来。要是使用静态数据,layui是可以渲染出来的。 原因 引用官方文档 有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化...
  • 今天遇到一个问题,我明明已经赋值于select,但是下拉确实是已经选中了,但是select框中没有回显...记得给select动态赋值之后,需要form.render()方法将select刷新一下,才可行,不然select读取值得时候会不稳定。 ...
  • layui下拉列表的事件不能用jq的change 应该用自带的方式写默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可。如:&lt;select lay-filter="test"&...
  • 1. 实例图如下: 2.html 代码如下: 3. js 代码如下: //tree layui.tree({ elem: '#btn-select-tree' //传入元素选择器 ,nodes: [{ //节点 name: '父节点1' ...
  • var shiNameId=$('#shiNameId')[0]; //选中要赋值的元素 shiNameId.add(new Option(bstCompanyAccount.workSiteCity),shiNameId.options[0]) //给第一个位置添加元素 shiNameId[0].selected = true;...
  • layui select 数据更新 及异步加载数据

    千次阅读 2019-11-15 09:40:36
    select 数据初始化 $(".unitNew").off().on("click", function () { setEmpty(); $(".selectName").html("<option value=''>直接选择或搜索选择<option>") var json = eval('...
  • 引用文件如下: <script type="text/javascript" src="js/jquery-3.0.0.min.js">...link rel="stylesheet" href="css/layui.css"> <script type="text/javascript" src="layui.js"></sc...
  • 这是小编花了好久才搞出来的全国一级市单独放在一个js文件中,命名为area.js var provinceList = [ {name:'北京'}, {name:'上海'}, {name:'天津'}, {name:'重庆'}, {name:'广州'}, {name:'韶关'}, ...
  • layUI 清空select选择

    2021-06-30 10:08:23
    html代码 <select id="connectName"> <option value='empty'></option> <option value='1'>1</option> <option value='2'>.../select>...form = layui.form; //
  • layui/select下拉不显示/select下拉消失

    千次阅读 2019-08-16 17:01:12
    一、解决方式 <div class="layui-form-item"> <label class="layui-form-label">产品类型</label> ...div class="layui-input-inline">...select name="type_id" id=""&g...
  • layui 动态加载 select

    2021-01-18 18:13:47
    layui ajax select 动态添加数据方法,给我指明了前进的方向。 首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。 做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功...
  • 今天小编就为大家分享一篇解决使用layuiselect append元素无效或者未及时更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layuiselect更改后生效

    千次阅读 2018-04-13 14:56:17
    layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form =...
  • layuiselect选项动态加载重新渲染方法 代码如下: function renderSelect(data){ var html = '<option value="">分诊类目</option>' for (var i = 0; i < data.length; i++) { html += '<...
  • layui修改select默认选项的坑

    千次阅读 2020-04-16 11:15:36
    只需要 $('#select').val('你的value值'); '#select'是你的select的id,当然你也可以用...那你直接设置是不生效的,需要刷新一下。 插入下列代码 $("#select").val("你的value值"); layui.form.render(); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,378
精华内容 551
关键字:

layuiselect刷新