精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui动态渲染生成select的option值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • div class="layui-form-item"> <label for="L_username" class="layui-form-label"> <span class="x-red"></span>客户名称: </label> <div class="layui-input-inline">

    html:

      <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red"></span>客户名称:
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="customer_search" name="customer_search" required=""
                           autocomplete="off" class="layui-input">
                </div>
    
                <div>
                    <button type="button" class="button-div" id="search_btn">搜索</button>
                </div>
            </div>
    

    js :

    $("#search_btn").click(function () {
            layui.use('form', function () {
                var $ = layui.jquery;
                var form = layui.form;
                var cust_search = $("#customer_search").val();
                if (cust_search == "") {
                    alert("客户不能为空");
                    return;
                }
                $.ajax({
                    data: {
                        'cust_search': cust_search
                    },
                    url: "{% url '21M:search_customer' %}",
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        if (data !== null) {
                            $("#customer_name").empty();
                            $("#customer_name").append(new Option("请选择客户", "0"));
                            $.each(data.cust_name_list, function (index, item) {
                                $('#customer_name').append(new Option(item));
                            });
                        } else {
                            $("#customer_name").append(new Option("暂无数据", ""));
                        }
                        //重新渲染
                        form.render("select");
                    }
                });
            });
        })
    
    

    后端数据返回:

    return JsonResponse({'cust_name_list':cust_name_list})
    
    展开全文
  • 亲测可用 //方式一:兼容性好,兼容ie8 //方式二:代码简单,但是不兼容ie8 谷歌没问题 报错处理 select渲染不成功,如果报错,请看是否有以下问题... ...

    方式一:

    <form class="layui-form" action="" lay-filter="updateModelForm">
            
                <div class="layui-form-item">
                    <label class="layui-form-label">数据类型</label>
                    <div class="layui-input-block">
                        <select name="typeId" id="typeId" lay-filter="required">
                        <!-- 如果兼容ie8,必须有一个默认的option -->
                            <option value="-1"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="updateSave">确定</button>
                        <button type="button" class="layui-btn" lay-submit="" id="updateModelClose">取消</button>
                    </div>
                </div>
            </form>
                        
    

    js代码

    <script type="text/javascript" th:inline="JavaScript">
        var form
        layui.use(['form', 'layedit', 'laydate'], function(){
            form = layui.form
            var layer = layui.layer
           
            form.render()
            function isUpdate() {
                var isUpdate = window.location.href.indexOf('?id=')//>-1是修改,否则是新增
                if(isUpdate > -1){
                    var newInfo = JSON.parse(sessionStorage.getItem("evaluateProjectManageInfo"))
                    console.log(newInfo)
                    form.val('updateModelForm', {
                        'name':newInfo.name,
                        'purpose':newInfo.purpose,
                        'createTime':newInfo.createTime.slice(0,10),
                        'actualFinishTime':newInfo.WCSJ,
                        'creatorId':newInfo.creatorId,
                        'username':newInfo.USERNAME,
                    });
                }
    
            }
            isUpdate()
            function getOptionSJLX(element,name,id){
                var data = {
                    page:1,
                    limit:999999
                }
                $.ajax({
                    type: "get",
                    url: "/user/userList",
                    dataType: 'json',
                    data:data,
                    success:function(msg){
                        console.log(msg)
                        if(msg.code == 0) {
                            var len = msg.data.list.length
                            for (var i = 0; i <len ; i++) {
                                //方式一:兼容性好,兼容ie8
                                var option = document.createElement("option");
                                option.setAttribute("value", msg.data.list[i][id]);
                                option.innerText = msg.data.list[i][name];
                                console.log(option)
                                document.getElementById(element).appendChild(option)
                                //方式二:代码简单,但是不兼容ie8  谷歌没问题
                                //$(element).append(new Option(msg.data.list[i][name], msg.data.list[i][id]));// 下拉菜单里添加元素
                            }
                            isUpdate()
                            layui.form.render();
                        }
                    },
                })
    
            }
            getOptionSJLX('typeId','name','id')
        });
    </script>
    

    报错处理

    select渲染不成功,如果报错,请看是否有以下问题
    1.请确认 先引入jquery.js文件,后引入 layui.js
    2.html中,select标签,必须要有一个option标签

    展开全文
  • layuiselect动态赋值 <select id="ZhiWuErJi" class="layui-input " type1="flow_select" isflow="1" required="required" name="ZhiWuErJi">  </select> $(window).load(function () { var q1...

    layui的select动态赋值

     <select id="ZhiWuErJi" class="layui-input " type1="flow_select" isflow="1" required="required" name="ZhiWuErJi">
      </select>
    
       $(window).load(function () {
             
            var q1 = document.getElementById("ZhiJi");
            console.log(q1.options.length);
            for (var i = 0; i < q1.options.length; i++) {
                if (q1.options[i].value == "@info.ZhiJi") {
                    q1.options[i].selected = true;
                }
            }
        //layui重新渲染
          layui.use('form', function(){
               var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
               form.render('select');
               //form.render();
           });
    

    需要重新渲染下

    展开全文
  • Layui 动态赋值select

    2021-01-25 16:21:14
    layui中通过接口动态渲染select。 话不多说,直接先附上效果图,再附上源码 let count = response.data.services.length; for(let i = 0 ; i < count ; i ++){ $('#inputBox').append(new Option(response...

    layui中通过接口动态渲染select。
    话不多说,直接先附上效果图,再附上源码
    在这里插入图片描述

     let count = response.data.services.length;
     
     for(let i = 0 ; i < count ; i ++){
                $('#inputBox').append(new Option(response.data.services[i].name , response.data.services[i].FormatStorageMedium)); 
         };
      form.render("select");
    
    展开全文
  • Layui Form 动态赋值select

    千次阅读 2020-11-24 11:54:27
    $.ajax({ url: '/queryConnectName', dataType: 'json', //服务器返回json格式数据 type: 'get', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒;... form.render('select');//需要渲染一下 } });
  • layui 实现select动态赋值和默认选择

    万次阅读 2019-08-13 16:19:25
    layui.form.render('select'); // $("#zh").get(0).selectedIndex = 0; } }); //动态添加下拉框 同时可以设置默认值 $.ajax({ url: '/jygk', // dataType:'json', //type:'post', success: function ...
  • layui表单
  • LayUIselect动态赋值的显示问题

    千次阅读 2019-09-18 10:51:26
    问题:昨天是解决了select的监听事件,以为问题就解决了,开始动态赋值,结果问题就来了,用异步加载数据,赋值,按照常理是没有问题,可是在layui中是有问题的,数据加载时正常的,只是显示不出来,可能是layui的...
  • 1.select动态赋值 //将真正的value赋值select。name为select标签后跟的name,value为想赋给select的值。 $(“select[name=example]”).val(“value”); &amp;amp;lt;!--select标签--&amp;amp;gt; &...
  • html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm(){layui.use('form', function(){var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()form.render();});}//...
  • layui动态赋值select标签

    千次阅读 2020-02-16 13:34:55
    layui select标签中,请求接口里面的返回的json数据明明已经赋值给了select标签 但是无法显示。 因为在layui中所有的组件都是声明使用 ,你表面上看了是一个select类型的显示类型但是并不是。需要手动声明吧数据...
  • layui 下拉框动态赋值

    千次阅读 2020-09-05 12:04:17
    核心代码部分为: 在select标签上面的class属性中加一公共类名称,...最后要重新渲染一下select标签,layui.form.render(‘select’); 否则可能还是会不展示下拉数据 <div class="layui-form-item"> <label
  • layui-input-block&amp;amp;quot; style=&amp;amp;quot;width:190px&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;select name=&amp;amp;quot;&amp;amp;quot; id=&amp;amp;quot...
  • layui.use(['form', 'layedit', 'laydate'], function () { var $ = layui.jquery; $.ajax({ url: '../api/SysType/GetArticleType?parentId=1',//json文件位置 type: 'get', //请求方式为get dataType:...
  • layui后台select赋值

    万次阅读 2017-12-19 14:09:40
    form.render('select'); var select = document.getElementById("Architectural") var names = res.names.split(';'); for(var i = 1;i  select.options.add(new Option(names[i],names[i]
  • var shiNameId=$('#... //选中要赋值的元素 shiNameId.add(new Option(bstCompanyAccount.workSiteCity),shiNameId.options[0]) //给第一个位置添加元素 shiNameId[0].selected = true; //第一级默认选中
  • 引用文件如下: <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...
  • layui下拉框动态赋值html代码:js代码:上图: html代码: <div class="layui-input-inline"> <select id="service" name="service" lay-verify="required" lay-filter="business" class="select"> ...
  • 在网上不断的查资料,... var changeselect = $('#productcategory').siblings("div.layui-form-select").find('dl').find(select).click(); form.render("select"); 如果有什么问题,可以直接给我留言,我会逐一解答
  • layui的下拉框动态赋值

    万次阅读 2020-02-01 13:42:00
    第一步:先把layui官方给的模板粘到自己的前端 注:下面的代码是我直接从layui官网粘过来的 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class=...
  • layuiselect下拉框赋值

    千次阅读 2020-12-19 12:04:56
    转:layuiselect下拉框赋值//重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.form(); //高版本建议把括号去掉,有的低版本,需要加()form.render();});}//赋值部分$....
  • layui 动态select赋值,页面不生效

    千次阅读 2020-12-21 15:45:35
    2019年08月02日 13:23:09被提需求:查询后 重置条件区域所以写代码table.reload('exhibitor', {page: {curr: 1 //重新从第 1 页开始},where: {keyword: $("input[name='keyword']").val(),is_reg: $("select[name='...
  • LAYUI下拉框后台动态赋值

    千次阅读 2018-12-12 18:05:16
    select name="xm" id="xm" lay-verify="required" lay-filter="xmFilter"&gt; &lt;option value=""&gt;&lt;/option&gt; &
  • layui 动态赋值select

    万次阅读 2018-08-29 09:23:44
    话不多少,直接贴代码吧 var resultData; var htmls = '请选择</option>'; //全局变量  $.ajax({ ... url: WEB_CONTEXT+'rest/proInforRestFul/getList', ... form.render('select');//需要渲染一下

空空如也

空空如也

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

layuiselect动态赋值