Layui在select下拉框中动态添加选项_layui select 动态加载-程序员宅基地

技术标签： Layui  layui  前端  html  javascript  

如题，话不多说，直接上代码（注意事项下方说明）

HTML：

<form class="layui-form" action="">
    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" lay-filter="test" id="test">
        <!-- 选项动态放置于此处 -->
        </select>
    </div>
</form>

JS：

// layui.use头部参考
// 其中注意"form = layui.form"、"$ = layui.jquery"为必写项，方便下方操作
layui.use(['table','form','layer'], function(){
    let table = layui.table, form = layui.form, layer = layui.layer, $ = layui.jquery;
    ...
});

// Option参数说明：Option("text","value")
$('#test').append(new Option("开","0"));
$('#test').append(new Option("关","1"));
// 最关键需要重新渲染下拉框
form.render('select');

效果图：

如果达不到预想中的效果可以留意一下注意事项。

注意事项：

1.select下拉框中的 lay-filter 和 id 属性必填，最好都写同一个字段，在本例子中均为 "test"。

2.可能有些小伙伴会发现，在HTML中引入的select失去了Layui风格，可能是因为没有<form>标签包裹的原因，测试中最好加上<form>标签以及其子<div class="layui-input-inline>标签，保证select正常呈现Layui风格。

3.以下两行代码作用和效果是相同的，可以替换应用。

$('#test').append(new Option("开","0"));
$('#test').append('<option value="0">开</option>');

到此为止，问题基本已解决，如有不妥之处，请大家指出，感谢！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38644742/article/details/120670647

智能推荐

Umi2.x升级到Umi3.x_node 多少版本对应的umi3-程序员宅基地

文章浏览阅读6.9k次，点赞5次，收藏7次。Umi3.x升级版本之路（一）修改依赖扁平化配置import all from umi修正语法支持antd4.x修改依赖npm uninstall -S dva antdnpm uninstall -D umi-plugin-react npm install -D umi@3 @umijs/preset-react// package.json"engines": { "node": ">=10.13.0"}// tsconfig.json"paths": { "@/*":_node 多少版本对应的umi3

【论文阅读】【三维目标检测】在Range view上做3D目标检测_rangeview-程序员宅基地

文章浏览阅读3.3k次，点赞10次，收藏22次。文章目录BEV or Range ViewRangeDet: In Defense of Range View for LiDAR-based 3D Object DetectionRange Conditioned Pyramid InMeta-Kernel ConvolutionWeighted Non-Maximum SuppressionData Augmentation in Range View DataExperimentrange view是仅针对物理旋转式扫描的激光雷达的特殊view，例_rangeview

shell 实现并发，并控制并发数量_shell 并发-程序员宅基地

文章浏览阅读4k次，点赞4次，收藏26次。为了方便理解，一步步的来首先先看一下串行的：#! /bin/bashST=$(date +%s)for i in $(seq 1 10)do echo $i sleep 1 # 模拟程序、命令doneET=$(date +%s)TIME=$(( ${ET} - ${ST} ))echo "time: ${TIME}"输出结果：12345678910time: 10这就最原始的进程运行模拟，串行方式，无法有效利用计算机的资源，_shell 并发

Mybatis-puls自动分页Page无法分页解决_使用mybatis-plus中page进行分页不生效-程序员宅基地

文章浏览阅读3.3k次，点赞3次，收藏5次。一开始使用Page时发现数据能出来但是无法分页，只能全部显示。打印数据出来也显示0。最后查了许多资料发现这个插件需要一个工具类的支持才可以实现。检查了一下代码发现也没有问题。最后更改完成测试，好使了。_使用mybatis-plus中page进行分页不生效

dpi与dp的关系_px、dp、sp、dpi之间的区别和转换-程序员宅基地

文章浏览阅读2k次。px、dp、sp、dpi之间的区别和转换区别：px (pixels)像素 -- 是像素，就是屏幕上实际的像素点单位。(一般UI人员在ps中经常使用)dp／dip 设备独立像素，android layout经常使用的尺寸单位，与设备屏幕有关，dp是虚拟像素，在不同的像素密度的设备上会自动适配。即与像素密度无关。sp 放大像素，主要是处理字体的大小dpi：Android支持四种不同的dpi模式：ldp..._dpi dp

2021-1-31: c语言中 %f 和 %lf 的区别_%if-程序员宅基地

文章浏览阅读3.4k次，点赞7次，收藏14次。%f和%lf分别是float类型和double类型用于格式化输入输出时对应的格式符号。其中：float，单精度浮点型，对应%f。double,双精度浮点型，对应%lf。在用于输出时:float类型可以使用%lf格式，但不会有任何好处。double类型如果使用了%f格式可能会导致输出错误。在用于输入时:double 类型使用了%f格式，会导致输入值错误。float类型使用double类型不仅会导致输入错误，还可能引起程序崩溃。所以在输入输出时，一定要区分好double和float，而使用对_%if

随便推点

AS5045磁旋转编码器使用以及STM32接收学习心得（另modbus协议、RS485接口、RS485转TTL说明）-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏40次。一、电气接口1、5V供电，1：VDD5；2：A；3: B；4：GND2、板子上没有配终端电阻，需要自己根据应用需要配电阻3、板子外径30mm，安装孔内径2.7mm,可配2.5的螺钉，两孔中心间距21mm.二、RS485接口通信协议编码器485波特率范围：1200-57600，可以根据具体实际请款设置波特率，默认设率9600,8，n,1。三、modbus通信协议格式（1）、moubus协议概要1、Modbus协议是一种单主/多从的通信协议，其特点是在同一时间，总线上只能有一个主设备，但可以_rs485转ttl

在阿里云CentOS7上搭建ftp服务器_阿里云centos配置ftp-程序员宅基地

文章浏览阅读3.5k次。当我再次被各种出站入站规则玩弄，在搜索引擎的帮助走出泥淖后，我决定记下这次经历_阿里云centos配置ftp

ARM Linux 3.x的设备树（Device Tree）-程序员宅基地

文章浏览阅读102次。2019独角兽企业重金招聘Python工程师标准>>> ..._error: include/dt-bindings/power/xlnx-zynqmp-power.h

使用JavaScript制作动态网页-2_javascript实现同个窗口的动态网页-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏15次。使用JavaScript制作动态网页-2表单验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title></head><body> <form action="..._javascript实现同个窗口的动态网页

Ubuntu20.04解决应用中心打不开的问题_snap商店打不开-程序员宅基地

文章浏览阅读1.5w次，点赞9次，收藏76次。Ubuntu20.04软件中心打不开 尝试了很多方法 Ubuntu 20.04 默认把软件中心换成了 snap, 感觉 snap 应用老出状况, snap 应用不但体积大, 安装好的应用还不时就崩溃, 所以如果要把电脑里的所有 snap 应用全部替换了, snapd 也卸载了. 下面这三句可以有效的解决 sudo apt install ubuntu-software sudo sn..._snap商店打不开

C语言-数据结构-栈-实验报告_数据结构栈的应用实验报告-程序员宅基地

文章浏览阅读6.5k次，点赞8次，收藏70次。实验报告内容：一、实验目的、要求：（1）熟练掌握栈的特点(先进后出FILO)及基本操作，如入栈、出栈等，栈的顺序存储结构和链式存储结构，以便在实际问题背景下灵活应用。（2）编写适当的主函数和相关函数，使实验题目运行出正确结果。（3）当场编程、调试、编译。（4）程序具有一定的健壮性、可读性，尽量简洁。（5）程序运行完成后分别存盘，上交实验报告，要求写出实验体会二、实验内容：（1）实验题目（2）主要函数的算法设计思想（3）程序清单（3）测试数据、实验结果及结论（4）实验体会（实验中存在的_数据结构栈的应用实验报告

推荐文章

热门文章

相关标签