填坑笔记-LayUI Select选中设置问题处理

解决layui动态加载复选框无法选中的问题 问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中 利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法——自己写一个复选框 <!--原有layui复选框--> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id= 立即下载

Visual Studio给了.net开发无数的方便,但是也带来了无数的坑=。=

今天就要又碰到一个坑,作为一名后端猿,前端水平实在令人捉鸡,所以开发的时候难免用现成的UI框架。

Layui是一款界面美观的UI,虽然功能性没有EasyUI齐全,但是它好看呀

Select是前端经常要用到的控件(别问我为什么不用dropdownlist,戒了。。。。),引入layui后,layui会自动设置这个Select的样式,但是问题就来了,引入Select控件后不能直接用 $("#xxx").val("xxx");来设置选中项了,搜索了N都文档都没解决问题。最后没办法,把网上的解决方案一个一个看过来,终于找到一个完美的解决方案了,下面上代码,引用路径就不贴了

<body>
    <form id="testForm" runat="server">
        <input id="btn_test" type="button" value="button" />
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select  id="test">
                    <option value=""></option>
                    <option value="0">测试值0</option>
                    <option value="1">测试值1</option>
                    <option value="2">测试值2</option>
                    <option value="3" >测试值3</option>
                    <option value="4">测试值4</option>
                </select>
            </div>
        </div>
    </form>
    <script type="text/javascript">

        layui.use('form', function ($, form) {
            var $ = layui.$;//重点在layui中引用JQ必须写这一句
            var form = layui.form;
            $('#btn_test').click(function () {
                $("#test").val("2");
                form.render('select', 'testForm');
            });
        });
    </script>
</body>

最最最重要的一件事:调用的时候 不要使用服务器控件!不要使用服务器控件!不要使用服务器控件!

因为使用服务器控件后会刷行页面导致选择值又被初始化了,傻傻的我就是用了一个<button>而不<input>然后就出现了神奇的一幕,选中后选中值出现一秒不到然后又跳到默认值了,泪奔,不说了,继续码代码去。

layui layer select 选择被遮挡的解决方法 在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪,会呈现在元素框之外。)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的也设置一下, 就完美解决了!!! 示例: 下面是一些示例: $(“.layui-table-body”).css(‘overflow’,’visible’); $(“.layui-table-box”).css(‘overflow’,’visible’); $(“. 立即下载

相关推荐

Layui 设置select下拉框自动选中某项的方法

1、 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。 2、 Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: * 发送对象: <

Layui:设置select下拉框自动选中某项

1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: &lt;div class="layui-form-item"&gt; &lt;la...

少东的博客 6万+

发票OFD格式转换成PDF

发票OFD格式转换成PDF

Be_insighted的博客 933

【教程】layui设置select选中

$('#etxt1').val('-1'); form.render('select'); //重新渲染select#etxt1还可以指定表单form.render(null,'test1');//更新lay-filter="test1"所在容器内的全部表单状态 form.render('select','test2');//更新lay-filter=...

hifhf的专栏 3385

【科普知识】什么是驱控一体化伺服电机?

驱控一体化伺服电机以其高度的集成性、兼容性、便捷性以及卓越的性能表现,成为了现代工业自动化领域的一颗璀璨明珠。对于那些追求高效、精准、智能控制的行业用户而言,它无疑是一种理想的选择。

m0_46512607的博客 3151

手把手教你用Verilog实现AT24C64的I2C读写(附完整仿真流程)

本文详细介绍了如何使用Verilog HDL设计AT24C64 EEPROM的I2C控制器,并配合ModelSim完成完整的仿真验证流程。内容涵盖I2C协议解析、Verilog状态机设计、AT24C64读写操作实现,以及仿真波形分析和调试技巧,为FPGA开发者提供了一套完整的EEPROM控制解决方案。

3c4x5z6v7b的博客 846

填坑指南----layui upload文件上传获取不到动态渲染的select选中的值

var data =["2020年","2019年","2018年","2017年","2016年"] $('#type').html('<option value="">请选择</option>'); $.each(data,function(k,v){ $('#type').append('<option value="'+ v+'"&...

jimjiayu 2511

【论文导读】ICDM2018|SASRec---基于自注意力机制的序列推荐(召回)

前言本次分享2018年发表在ICDM上的论文----「Self-Attentive Sequential Recommendation」。主要是应用self-attention机制来做一...

Blank_Space 8033

【新手须知】Spring Boot 2.0.0 + MyBatis + Shiro + Swagger 开发项目踩坑记录

写在前面 Swagger 2.8.0 Spring Boot 2.0.0.RELEASE Shiro 1.4.0 Mybatis 1.3.1 填坑 踩坑一: MyBatis xml文件中参数名选择 若UserMapper.java写法为 User findByUserId(int userId); 则在UserMapper.xml里参数名只能为arg0、arg1… ...

Michael Zhan的博客 3399

避坑指南:DeepSeek Function calling流式输出中的常见问题与解决方案

本文深入探讨了在DeepSeek Function Calling中实现流式输出时常见的参数拼接、函数依赖管理和错误处理等核心挑战。针对流式响应中参数碎片化的问题,提供了健壮的参数拼接方案与状态管理策略。同时,文章详细阐述了如何管理函数调用顺序、处理条件性执行,并构建了分阶段的错误处理与重试机制,旨在帮助开发者构建稳定、高效的流式AI应用。

weixin_29062671的博客 203

【rk3566/3568】Android 11移植gms

【rk3566/3568】Android 11移植gms 1、前言 测试功能时,想去Google play store去下个应用测试,发现通过网页搜索总是下载不到正确的谷歌服务框架;于是就不得不去搞一个内置的gms。 2、移植 1、需要下载Android 11对应的gms的包 opengapps 2、看下文件目录 直接移植core里面的文件,GAPPs Optional按需添加 3、在vendor下创建google目录 ...

lin_ff的博客 7646

layui框架的select获取选中的值、选中的文本、选中的索引,禁用、启用

HTML <div class="layui-form-item "> <label class="layui-form-label">测试Demo</lab...

SummerGao 1万+

Win10平台下QT6.9.0 OpenCV 4.10.0从入门到精通

我最近开发一个视觉项目,我们从0开始记录在windows 10下 用QT6.9+OpenCV 4.10.0搞定整个项目的开发过程。以抛砖引玉,大家共同进步。

fds111111的博客 1712

layui动态设置select选中

编辑时 动态设置下拉框 layui select 为选中状态 // 当前的select的id $('#type').val('你的value值'); //更新全部 form.render();

东东东东东辉 1万+

解决TexStudio编写LaTeX论文引用文献问题:正文引用处出现[?],参考文献也不显现

当我们利用LaTeX编写论文时,可能会出现引用参考文献时正文引用处出现?号,肯能的原因及解决方案如下: 问题一 忘记在\end{document}前面放\bibliographystyle{样式}和\bibliography{参考文献bib文件名}: \bibliographystyle{plain} \bibliography{sample} 其中, LaTeX 标准选项及其样式共有以下8种: plain,按字母的顺序排列,比较次序为作者、年度和标题. unsrt,样式同plain,只是按照引用的先后

左手の明天的博客 9529

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

【Layui】------- Layui select 选中

1. 复值选中 需要重新对 select 进行渲染; 代码如下: 2.阿里云米店:https://mi.aliyun.com/shop/36078 for( item in FormEditCopy[0]) { if(item=="审批状态"){ $("option[value='已完成']").att...

皮皮冰要做大神 4618

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

动态设置 layui select 为选中状态

有时候我们编辑某条信息时常常会有下拉框的存在,比如性别,类型等。这篇博客就记录一下动态设置layui的select设置选中。 第一种使用ajax动态加载 $.ajax({       url: "${ctx}/articleMange/getTypeValue" ,    //后台方法名称       type: "post",      dataType: "json",       t

qq_35238367的博客 3万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

layui layui select下拉事件选中问题

该文章记录了layui select下拉事件获取值的问题。在HTML代码中,使用了一个名为"rprovince"的下拉选择框,其中包含多个选项。在JavaScript代码中,使用form.on事件监听器来监听下拉框的变化,并在选择变化时弹出警告框显示选中的值。

weixin_39673280的博客 1875

layui select赋值和默认选中完美实现

在网上不断的查资料,发现网上的资料给的模拟两可,具体实现方式很难实现,这次我把这个功能完整的实现了,现在把代码贴出来,方便大家使用。 var productCategory = getCategory(); //获取产品分类 var menu = getMenuCategoryProduct(Datas.id); //获取下拉框数据 //第一步 执行页面的选择栏的载入 $.each(productCategory, function (index, item) { $('#productca

东方不败 5106

layui怎么设置select默认选中,修改回显

后端取出的值 <div class="layui-form-item" style="position: relative;z-index: 10;"> <label class="layui-form-label">文章分类</label> <div class="layui-input-block" lay-filter="selFilter"> <selec

zhhhhhh1213的博客 6557

2021-10-09 layui 获取 select选中的值

jquery获取layui下select选中的值 jquery获取layui下select选中的值 <select name="region" lay-filter="region-dropdown"> <option value="ap-chengdu">成都</option> <option value="ap-nanjing">南京</option> <option value="ap-beijing-1"

Ysy3757的博客 4639

layui 设置select的option被选中

html代码 <div class="layui-form-item"> <label class="layui-form-label">所属角色</label> <div class="layui-input-inline"> <select id="roleid_edit" name="roleid" lay-filter="aihao" data-placeholder="请选择..."> <foreach name="r

迪奥乔斯达的博客 2420

layui的select获取自定义属性和默认选中

<span class="color-green">加班选择</span> <select name="is_cargo" class="layui-input" lay-filter="test"> <option data-id="996" value="1">996</option> <option data-id="007" value="2">007</option> </select>

个人中心 1681

layui 如何取得select下拉框选中的值

引用layui插件,取得下拉框的值模板:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1&quo

php菜鸟技术天地 9万+

Layui获取Select下拉框选中值

定义下拉框: <div class="layui-inline"> <label class="layui-form-label " style="width:120px">督学主题:</label> <div class="layui-input-inline"> <select id="Threme

qq_42782011的博客 4596

layui下拉js动态修改选中并展示

众所周知select的下拉的赋值方式为$(“#ksbm”).val(1);那么select下拉框就会根据value值选中并展示对应的选项,但layui中form表单尝试发现并不可行,也查了很多资料,感觉说的好复杂。

bdwl_cn的博客 682
上一篇: 填坑笔记-页面Page_Load调用2次的问题解决
下一篇: easyui-combotree的使用
SImble77
博客等级 码龄14年 12粉丝 10原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值