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

2023-05-16

一、问题:利用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();
    })    

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

(动态添加select后不显示?)layui动态添加select后重新渲染 的相关文章

  • Lambda表达式的使用

    对于jdk1 8其实并不是那么熟悉 xff0c 但是要学习这一点 xff0c 对以后工作有好处 xff0c 接下来开始学习jdk1 8在Android studio的配置以及lambda表达式的使用吧 Lambda表达式 jdk1 8中新增
  • ROS实现无人机目标跟踪/物体跟随/循迹

    无人机自主物体跟随 循迹 1 物体跟踪1 1 实现思路1 2 代码示例 2 自主寻线 本实验采用ROS和OpenCV实现功能 xff0c 实验平台采用Parrot的Bebop2无人机ROS部分的学习可以参考我的专栏 xff1a ROS学习记
  • vs code中项目的基本配置--include路径、运行参数、debug配置

    1 安装C C 43 43 for Visual Studio Code 点击左边扩展栏图标 gt 搜索C C 43 43 gt 安装 gt Reload xff1a 安装完成之后 xff0c 打开你的包含c 43 43 的文件夹 xff0
  • CMakeLists.txt编写规范模板及CMake常用变量

    文章目录 基本语法规则常见CMakeLists txt中指令剖析从VS项目配置过程理解CMakeLists内容CMake中常用变量汇总常用CMakeLists文件模板 基础模板使用OpenCV库CMakeLists文件模板使用PCL库CMa
  • C++ 多线程detach()操作的坑以及传参

    detach 的作用是将子线程和主线程的关联分离 xff0c 也就是说detach 后子线程在后台独立继续运行 xff0c 主线程无法再取得子线程的控制权 xff0c 即使主线程结束 xff0c 子线程未执行也不会结束 当主线程结束时 xf
  • 条件变量中的唤醒丢失问题分析

    本文是在其他作者博文的基础上进行了部分补充 原文 xff1a https zhuanlan zhihu com p 55123862 0 前言 条件变量 xff08 condition variable xff09 和互斥锁 xff08 m
  • 无人车传感器 IMU与GPS数据融合进行定位机制

    前言 上一次的分享里 xff0c 我介绍了GPS的原理 xff08 三角定位 xff09 及特性 xff08 精度 频率 xff09 xff0c 同时也从无人车控制的角度 xff0c 讨论了为什么仅有GPS无法满足无人车的定位要求 为了能让
  • C++类对象的赋值与=运算符重载

    本文主要介绍C 43 43 中的赋值运算符重载函数 xff08 operator 61 xff09 的相关知识 1 概述 1 1 why 首先介绍为什么要对赋值运算符 61 进行重载 某些情况下 xff0c 当我们编写一个类的时候 xff0
  • 微信小程序开发入门(一)

    所有示例的完整代码 xff0c 都可以从 GitHub 的代码仓库下载 一 小程序是什么 xff1f 学习小程序之前 xff0c 先简单说一下 xff0c 它到底是什么 字面上讲 xff0c 小程序就是微信里面的应用程序 xff0c 外部代
  • rtp载荷H264解包过程分析,ffmpeg解码qt展示

    网络抽象层单元 NALU NALU头 NALU 头 由1个byte组成 它的语法如下 43 43 0 1 2 3 4 5 6 7 43 43 43 43 43 43 43 43 43 F NRI Type 43 43 F 1 个比特 for
  • CPU上下文切换、进程上下文、中断上下文

    由于Linux是一个多任务操作系统 xff0c 能够支持远大于CPU数量的任务同时运行 当然 xff0c 这些任务实际上并不是真的在同时运行 xff0c 而是由CPU进行调度 xff0c 将时间分片 xff0c 每个任务占用1个时间片 xf
  • Gstreamer概述

    1 什么是GStreamer GStreamer 是用来构建流媒体应用的开源多媒体框架 framework xff0c 其基本设计思想来自于俄勒冈 Oregon 研究生学院有关视频管道的创意 同时也借鉴了DirectShow的设计思想 其目
  • grbl学习之旅---serial篇

    serial c和serial h文件是实现了通过串行端口发送和接受字节的功能 首先是serial h中定义了基本函数和常量大小 xff1a ifndef RX BUFFER SIZE define RX BUFFER SIZE 128 定
  • ip rule,ip route,iptables 三者之间的关系

    以一例子来说明 xff1a 公司内网要求192 168 0 100 以内的使用 10 0 0 1 网关上网 xff08 电信 xff09 xff0c 其他IP使用 20 0 0 1 xff08 网通 xff09 上网 首先要在网关服务器上添
  • 什么是Zero-copy零拷贝

    考虑这样 种常 的情形 xff1a 你需要将静态内容 xff08 类似图 件 xff09 展 给 户 那么这个情形就意味着你需要先将静态内容从磁盘中拷贝出来放到 个内存buf中 xff0c 然后将这个buf通过socket传输给 户 xff
  • 图解协程原理

    前言 协程 Coroutines xff0c 是 Kotlin 最神奇 的特性 xff0c 没有之一 本文会以图解 43 动画的形式解释 Kotlin 协程的原理 看完本文后 xff0c 你会发现 xff0c 原来协程也没有那么难 本文要求
  • ubuntu 16.04下安裝和配置ros

    書上和網上關於ubuntu下安裝ros的文章很多 xff0c 但是很多介紹的不完整 xff0c 並且ubuntu和ros之間其實是有版本對應關系的 xff0c 並不是所有的ros都能安裝到所有的ubuntu上 xff0c xff08 很多書
  • Ubuntu 16.04安装docker详细步骤

    因需要安装opendronemap 而这个依赖于docker 所以记录了一下安装docker的步骤 比较简单 通过apt的docker官方源安装最新的Docker CE Community Edition xff0c 即Docker社区版
  • 在本地shell脚本中ssh到远程服务器并执行命令

    shell远程执行 xff1a 经常需要远程到其他节点上执行一些shell命令 xff0c 如果分别ssh到每台主机上再去执行很麻烦 xff0c 因此能有个集中管理的方式就好了 一下介绍两种shell命令远程执行的方法 前提条件 xff1a
  • Catkin_make执行过程

    这是一个比较复杂的问题 xff0c 但是有时候会有莫名其妙的编译错误 xff0c 在找错误的过程中会非常需要了解这个过程 1 模板文件 首先说一下 in文件 在catkin的目录中有许多 in文件 这些都是模板文件 xff0c 以 opt

随机推荐

  • Docker用yum安装步骤

    Docker用yum安装步骤 一 安装docker xff08 完整版 xff09 1 Docker 要求 CentOS 系统的内核版本高于 3 10 uname r 2 使用 root 权限登录 Centos 确保 yum 包更新到最新
  • 1024,如果全世界程序员都消失了,会怎样?

    这两天 xff0c 有一个话题引起了程序员的广泛讨论 xff1a 年薪80W程序员相亲被鄙视 某知名互联网社区 xff0c 一网友发帖 xff0c 自己年薪80W去相亲 xff0c 竟然被鄙视不如在二本学校教书的大学老师 估计令他没想到的是
  • 非线性控制1.1——稳定与跟踪问题概念

    一 非线性控制系统的两大任务 1 稳定 xff08 或称调节 xff09 问题 稳定问题是要使得闭环系统的状态稳定在一个平衡点附近 对于稳定问题 xff0c 系统的输出不一定要有具体的物理意义 xff0c 此时可以借助输入 输出状态线性化方
  • 在 linux ubuntu 18.04 上运行QQ音乐

    在 linux ubuntu 18 04 上运行QQ音乐 我使用的组合为 ubuntu 18 04 43 wine stable 3 6 43 QQ音乐17 63 xff0c 未在其它平台做过尝试 一直想在ubuntu上好好听音乐 xff0
  • 非线性控制1.0——自适应控制和鲁棒控制

    1 鲁棒控制和自适应控制的联系与区别 鲁棒控制是以目的定义的控制方法集合 xff0c 自适应控制是以手段定义的控制方法集合 xff0c 这两种控制都是为了应对 当数学模型不能精确表示实际系统的情况下 狭义的鲁棒控制是指H2 xff0c Hi
  • 非线性控制2.0——鲁棒控制之H无穷控制器设计

    一 基本概念 对于图1所示系统 xff0c u为控制输入 xff0c y为测量输出 xff0c z为被调输出 xff0c w为干扰输入 xff0c 由输入u xff0c w到输出y xff0c z的传递函数G成为增广被控对象 xff0c 控
  • 非线性控制1.0——控制理论生态及结构

    一 控制理论地图 二 控制理论发展及结构 上图应用于 xff1a https www zhihu com people xiang yi 55 49 answers
  • 四旋翼飞行器——飞行原理

    1 机械结构 旋翼对称分布在机体的前后 左右四个方向 xff0c 四个旋翼处于同一高度平面 xff0c 且四个旋翼的结构和半径都相同 xff0c 四个电机对称的安装在飞行器的支架端 xff0c 支架中间空间安放飞控板 结构形式如图 1 1所
  • 四旋翼飞行器——非线性化模型

    一 建模思路 该模型目标控制量是机体相对于地面坐标系的线速度的三个分量Vx xff0c Vy xff0c Vz xff0c 而我们能控的实质上只有四个电机的转速W1 xff0c W2 xff0c W3 xff0c W4 怎样由输入一步步推导
  • 故障诊断4—龙伯格状态观测器设计

    1 龙伯格状态观测器概念 已经线性系统模型如下 xff1a 当系统状态量难以获取 xff0c 但实际控制中又需要利用系统状态量时 xff0c 如何通过输入量和输出量重构系统状态量 xff1f 这便是龙伯格状态观测器设计初衷 xff0c 将实
  • 故障诊断5——状态观测器和输出观测器

    1 状态观测器分类 在现代控制理论中 xff0c 控制系统的基本结构和经典控制理论一样 xff0c 仍然是由受控对象和反馈控制器两部分构成的闭环系统 不过在经典理论中习惯于采用输出反馈 xff0c 而在现代控制理论中则更多地采用状态反馈 由
  • GPS漂移和定位不准确的解决办法

    解决GPS漂移主要从两方面入手 xff1a 一 主系统的设计主要减少在近距离内对GPS信号的干扰 二 软件处理 软件处理主要集中在导航软件处完成 xff0c 导航软件会将坐标定位在道路之内 xff0c 如果GPS接收到的信号超出道路的半径范
  • AI---是什么?可以做什么?

    1 AI的项目简单介绍 图像识别 描述 xff1a 给定图片 xff0c 识别图片中有什么 xff1f 算法 xff1a KNN CNN 情感分析 描述 xff1a 判断文本包含的情感是正面 负面还是中性 关键 xff1a 文本如何表示成向
  • realsense的安装问题

    realsense的安装问题 0 旁白1 SDK的安装2 python开发包的安装3 nodejs开发包的安装方法1 xff1a 方法2 xff1a 接手一位同事的realsense相关项目 xff0c 先配置一个环境 xff0c 出现不少
  • 二叉排序树的删除

    xff08 网上讲二叉排序树删除的资料很少 xff0c 这篇很不错 xff01 转自 xff1a http bbs csdn net topics 110010437 xff09 二叉排序树的删除 xff1a 对于一般的二叉树来说 xff0
  • 分布式锁学习

    概述 分布式锁是控制分布式系统之间同步访问共享资源的一种方式 在分布式系统中 xff0c 常常需要协调他们的动作 如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源 xff0c 那么访问这些资源的时候 xff0c 往往需要互斥来
  • 无人机飞行控制

    intro 这篇笔记记录了无人机飞控算法和px4相关 control algorithm adrc 周立功讲adrc 参数整定 xff1a Scaling and Bandwidth Parameterization
  • 168-HITL-dev-manual

    HITL todo 使用mavlink收ref和imu 可以选择发出pwm和torque 发出torque的话 xff0c 没有考虑pwm的饱和 发出pwm的话 xff0c 电机的参数也不准 参考GAAS FC 写收的imu gps xff
  • 图优化理论(1)

    简介 图优化本质上是一个优化问题 xff0c 所以我们先来看优化问题是什么 优化问题有三个最重要的因素 xff1a 目标函数 优化变量 优化约束 一个简单的优化问题可以描述如下 其中x为优化变量 xff0c 而F x 为优化函数 此问题称为
  • (动态添加select后不显示?)layui动态添加select后重新渲染

    一 问题 xff1a 利用jQuery动态添加的代码中包含select xff0c 运行后不显示 1 显示的状态 2 后台的代码 正常情况下应该像队长班级一样显示 xff0c 但是却惊奇的发现 xff0c 事与愿违 二 原因 Layui会对