(动态添加select后不显示?)layui动态添加select后重新渲染

layui下拉框select实现多选,并且编辑时候回显 这里主要记录一下配置,详情请进:添加链接描述 1、引入formSelects-v4的js、css 2、定义一个下拉框 3、js配置 注意:base: ‘/static/layui/js/’ 一定要与你引入的路径一致,并且写全,不然不起作用 参考网址:添加链接描述............ 阅读详情

一、问题:利用jQuery动态添加的代码中包含select,运行后不显示
1、显示的状态
在这里插入图片描述
2、后台的代码
在这里插入图片描述
正常情况下应该像队长班级一样显示,但是却惊奇的发现,事与愿违

二、原因
Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

所以当新添加这些元素以后需要对页面表单元素重新渲染一下

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

三、抢救措施
在每一次添加之后,都对form表单重新渲染,直接上代码

function renderForm(){//在这里把重新渲染的功能包装秤一个方法
        layui.use('form', function(){
            var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()
            form.render();
        });
    }
$("#addBtn").click(function () {
        var array = new Array();
        $("#leaderCls option").each(function () {
            var txt = $(this).text();
            if(txt!="请选择班级"){
                array.push(txt);
            }
        })

        var str = "";
        for(var i=0; i<array.length; i++){
            str += "<option value='"+array[i]+"'>"+array[i]+"</option>"
        }
        $("#infoList").append("<div><a href=\"#\" name=\"rmlink\">X</a>\n" +
            "<div class=\"layui-form-item\">\n" +
            "\t<label class=\"layui-form-label\">队员学号:</label>\n" +
            "\t<div class=\"layui-input-block\">\n" +
            "\t\t<input type=\"text\" name=\"stuId\" required lay-verify=\"required\" placeholder=\"请输入队员学号\" autocomplete=\"off\" class=\"layui-input\">\n" +
            "\t</div>\n" +
            "</div>"+
            "<div class=\"layui-form-item\">\n" +
            "    <label class=\"layui-form-label\">队员姓名:</label>\n" +
            "    <div class=\"layui-input-block\">\n" +
            "        <input type=\"text\" name=\"stuName\" required lay-verify=\"required\" placeholder=\"请输入队员姓名\" autocomplete=\"off\" class=\"layui-input\">\n" +
            "    </div>\n" +
            "</div>\n" +
            "<div class=\"layui-form-item\">\n" +
            "    <label class=\"layui-form-label\">队员班级:</label>\n" +
            "    <div class=\"layui-input-block\">\n" +
            "       <select name=\"stuClass\" lay-filter=\"status\">\n" +
            "           <option value=\"\">请选择班级</option>\n" +
                            str+
            "       </select>\n"+
            "    </div>\n" +
            "</div></div>");
        renderForm();//每一次动态添加代码后重新渲染一下form
        // 为新元素节点添加事件侦听器
        bindListener();
    })    

四、效果
在这里插入图片描述
好起来了。

在layui中select更改后生效的方法 在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); } 在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支 立即下载

相关推荐

PrimeTime生成.lib竟暗藏PG添加Bug

1. 确认原始库中是否包含PG引脚的定义。2. 查阅PrimeTime的write_lib命令文档,寻找相关选项。3. 在生成库时使用正确的选项,例如-include_pg_pins或类似参数。4. 验证生成的.lib文件是否包含pg_pin部分。

limanjihe的专栏 1919

layui的select选项动态加载重新渲染方法

layui的select选项动态加载重新渲染方法 代码如下: function renderSelect(data){ var html = '<option value="">分诊类目</option>' for (var i = 0; i < data.length; i++) { html += '<option value='+ data[i].id +'>'+ data[i].category_name +'</option>'

小钢炮的博客 5247

Word中 Go to endnote 出现闪退问题解决办法

Word中 Go to endnote 出现闪退问题解决办法

努力努力努力 1万+

layui前端框架的多选下拉框,第二次加载时不出现的问题

项目新增的需求,需要点击button弹出一个弹窗,主要实现多选下拉框的内容,于是弹窗就采用了layui来做,这个很容易实现了,但是接下来使用的多选下拉框插件,出现了各种各样的问题,最主要的问题是,第一次点击button弹窗中的下拉框是可以多选的,之后点击button弹窗的其他内容是正常的,但是唯独多选下拉框没有加载出来。 于是按照网上的说法要对form表单进行重渲染: 加上这段代码之后,果...

fhmlyq的博客 1149

Unity AssetBundle 之 (入门)简单的资源打包成AB包的方法

Unity AssetBundle 之 (入门)简单的资源打包成AB包的方法 目录 Unity AssetBundle 之 (入门)简单的资源打包成AB包的方法 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、关键代码 一、简单介绍 Unity中的一些基础知识点。 本节介绍,Asset Bundle 在 Unity中的使用,入门第一篇,如何AssetBundle标记,如何打包成AssetBundle的操作方法,有不对的地方欢迎指正。...

仙魁XAN 1万+

ADS124S08配置避坑指南:从SPI时序到寄存器设置,手把手教你调通24位ADC

本文详细解析了ADS124S08 24位ADC的SPI时序配置、寄存器设置及外围电路设计中的关键细节,帮助工程师避开常见陷阱。从SPI通信模式选择到DRDY引脚读取优化,再到基准电压启动时间调整,提供了实战验证的解决方案,确保高精度数据采集的稳定性。

weixin_29192365的博客 285

Layui下拉框的渲染

Layui下拉框的渲染

m0_47944994的博客 1217

​网格划分理论:CFD理论67 网格划分-三大理论问题_哔哩哔哩_bilibili传统解释非结构化网格是不对的——计算传热学大叔专题讨论2--CFD网格类型_哔哩哔哩_bilibili

传统解释非结构化网格是不对的——计算传热学大叔。fluent计算理论和离散方法原理视频推荐。

qq_15963745的博客 183

layui动态追加select元素不显示

今天用layui写前端页面时候用到了通过jqurey中的befor追加select元素 一开始写法: <div class="layui-form-item"> <label class="layui-form-label">执行人员</label> <divstyle="width: 150px;display: inline-b...

小明的博客 3421

利用 SAP Joule 提升 ABAP 开发效率的前提条件与限制全解析

综上,想要在 ABAP Development Tools 中顺利使用 SAP Joule,既要准备好 BTP、IAS、ABAP 系统与 ADT 的版本与信任链,也要理解许可证、配额、语法范围等限制。只有在这些前提全部满足后,Joule 才能真正发挥生成式 AI 的价值,帮助 ABAP 开发者从繁琐模板中解放出来,把注意力投入在业务创新与 Clean Core 改造之上。未来 SAP 还将扩展中文语境、自动修复建议以及跨系统智能代理等功能,值得持续关注。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 663

BEV和OCC学习-4:数据准备生成pkl文件(NuSences)

info[‘cam_instances’][‘CAM_XXX’][i][‘bbox_3d’]:长度为 7 的列表,以 (x, y, z, l, h, w, yaw) 的顺序表示实例的 3D 边界框。info[‘cam_instances’][‘CAM_XXX’][i][‘bbox’]:2D 边界框标注(3D 框投影的矩形框),顺序为 [x1, y1, x2, y2] 的列表。info[‘cam_instances’][‘CAM_XXX’][i][‘attr_label’]:实例的属性标签。

zfjBIT的专栏 1699

LayUI 的 select 动态联动

LayUI 的 select 动态联动 要实现联动效果注意两点: 第一:要可以监听到 select 的 change 事件; 第二:异步加载的内容,需要重新渲染后才可以 正常使用。 html 代码: <form class="layui-form batchinput-form" action="" id="box-form"> <div class="layui-form-...

肖朋伟 6469

24、中性原子量子计算:原理、方法与实验

本文系统介绍了中性原子量子计算的原理、方法与实验进展。重点阐述了利用碱金属原子作为量子比特,通过磁光阱、光偶极阱和光晶格等技术实现原子捕获与控制的方法。同时,详细分析了单量子比特门操作和量子态工程的实现手段,并总结了相关实验结果与未来发展方向。该技术路线为构建大规模量子计算系统提供了可行方案。

ol789012的博客 244

layui select动态添加option

layui select动态添加option <form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</...

梓鸿 4220

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

xmselect重新渲染_select 动态赋值 layui重新渲染

select下拉框Js$(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"...

weixin_39878698的博客 4549

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

【Layui】Layui下select下拉框不显示或没有效果

今天再用Layui写界面时,发现自己的select下拉框没有显示 <from class="layui-form" action=""> <div class="layui-input-inline"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <input type="text" name="

爱敲代码的小黄 4573

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Layui —— 动态添加option下拉选不显示

var $dataGroups = $(".data-groups"); if ($dataGroups.length > 0){ $dataGroups.each(function (i,e) { if($(this).attr("data-group") != undefined){ $.ajax({ url: "/dict/listDictsByCode?dictTypeCod

nann-viiv 的博客 1622

layui option 动态添加_layui select如何动态添加option

这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下。html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm(){layui.use('form', function(){var form = layui.form();//高版本建议把括号去掉,...

weixin_39675215的博客 997

layui option 动态添加_layui select动态添加option的实例

html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm(){layui.use('form', function(){var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()form.render();});}//增加产品类别按钮点击事件function addProductClassify(){layer....

weixin_42522045的博客 1242

layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果

Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element模块)所以当新添加这些元素以后需要对页面表单元素重新渲染一下layui.use('form', function(){var form = layui...

weixin_39820437的博客 1865

Layui select(下拉框)使用(动态渲染,更改选中值)

1 动态渲染 HTML 代码: <form> <select id="select" > <option value="">--全部--</option> </select> </form> JS代码: var ids=['1','2','3']; var names=['流域','河段','水系']; var select= document.getElementById('select'.

旭东怪的博客 2万+

layui 中 select 绑定动态数据不显示的问题

layui是大家比较喜欢的后台搭建框架,但它在给大家带来便利的同时,有会出现一些问题,比如select绑定动态数据不显示。 我在项目中就遇到了这个问题,解决方法如下 layui.use(['form' ], () => { let _this = this //绑定this let form = layui.form let

weixin_44165899的博客 1478

layui——动态渲染下拉框

正经学徒,佛系记录,不搞事情 吐槽一句:网上的那些“朋友”,既然想要分享就请分享的完整一点,难道不知道“代码给一半,**短一半吗的道理吗” 需求 动态的给下拉框赋值,且仍具有layui的样式 实现 html代码,保留一个请选择(可去除,默认下拉会选择第一个) 最重要的是这个class属性layui-form,很多人是因为没有添加这个属性导致layui.form.render()重新...

toBeMN的博客 1万+

layui选择框赋值不显示_layui 动态给select赋值,页面不生效

2019年08月02日 13:23:09被提需求:查询后 重置条件区域所以写代码table.reload('exhibitor', {page: {curr: 1 //重新从第 1 页开始},where: {keyword: $("input[name='keyword']").val(),is_reg: $("select[name='is_reg']").val(),}});//重置搜索条件$...

weixin_39818662的博客 2552
上一篇: 如何用IDEA创建一个javaWeb项目forDHQ
下一篇: Windows下ImportError: No module named _caffe解决方案
Hejxxx_
博客等级 码龄8年 38粉丝 62原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值