jquery动态给下拉框select添加option

2023-11-04

jquery动态给下拉框select添加option

注意:有的框架如layui,需要额外添加form.render(),否则会失效

<select id="materialId" name="materialId" lay-verify="" lay-search>
   <option value="" selected>选择产品</option>
</select>

//法一:通过类添加
$("#materialId").append(`<option value="${productList[i].id}">${productList[i].name}</option>`)

//法二:通过name添加
$("select[name='materialId']").append( "<option value="+productList[i].id+">"+productList[i].name+"</option>"
)
form.render();

网上查到的扩展:

 
$("#selectId").append("<option value='"+value+"'>"+text+"</option>");
 
当然除了这句,还有设置默认选择值、第一个的值、最后一个的值、第N个的值等等的,所以在网上搜了一上:
 
jQuery获取Select选择的Text和Value:
 
1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
 
2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
 
3. var checkValue=$("#select_id").val();  //获取Select选择的Value
 
4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
 
5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值
 
 
 
jQuery添加/删除Select的Option项:
 
1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
 
2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
 
3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
 
4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
 
5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
 
5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery动态给下拉框select添加option 的相关文章

  • 如何将变量传递给函数引用?

    在 React Native 中 当你有需要在渲染时运行并且必须传递变量的函数时 大多数人建议应该使用 onPress gt this functionName variable 然而 当处理大型列表和复杂组件时 您必须优化代码 为每个 r
  • jquery .load() 不起作用

    我似乎无法让 jquery 的 load 函数工作 一定是我缺少的一些简单的东西 基本上只是试图将 more html 的片段加载到 index html 中 索引 html
  • 如何在 javascript/jquery 中进行非阻塞睡眠?

    如何在 javascript jquery 中进行非阻塞睡眠 冒着从评论者那里窃取答案的风险 请使用设置超时 https developer mozilla org en US docs Web API WindowTimers setTi
  • 即使 WebPack 构建工作正常,VS Code 显示未找到模块

    我的 VS Code 说它找不到导入 即使我的 WebPack 构建仍然有效 这是进口 import as tf from tensorflow tfjs 以及来自 VS Code 的消息 找不到模块 tensorflow tfjs 您的意
  • NodeJS Express 中每个请求的全局范围

    我有一个基本的快速服务器 需要在每个请求处理期间存储一些全局变量 更深入地说 请求处理涉及许多需要存储在变量中的操作 例如global transaction 当然 如果我使用global范围 每个连接都将共享其事务的信息 并且我需要一个全
  • 我可以在 Express POST 请求中进行 DOM 操作吗?

    我正在使用基本的 HTML CSS 前端 目前有一个登陆页面 上面有一个表单 可将 一些数据发送到数据库 当请求完成后 它期待某种响应 在这种情况下 我正在重新渲染页面 但是 我想用某种感谢消息替换表单 以便用户知道它已正确发送 我尝试过简
  • 如何用html标签替换字符串的一部分?

    如何在 jQuery 中用 html 标签替换字符串的一部分 比如说 div Who am i div 应该 div b Who b am i div 您可以使用html方法的回调函数和replace method div html fun
  • 如何配置 StrongLoop LoopBack MongoDB 数据源以部署到 Heroku

    我正在使用 LoopBack 版本 1 6 并使用以下数据源配置运行本地 mongoDB 服务器进行开发 mongodb defaultForType mongodb connector loopback connector mongodb
  • jQuery 自动完成/Twitter Typeahead 填充多个字段

    我目前正在使用 TypeAhead Bootstrap 但很高兴使用 jQuery Autocomplete 来完成我需要的事情 我有 5 个输入字段 我还有一个结构如下的表 因此我将使用远程数据源 Classification Model
  • WebRTC、getDisplayMedia() 不捕获远程流中的声音

    我有一个自己的网络应用程序 它基于peerjs库 它是一个视频会议 我正在尝试使用 MediaRecorder 进行录制 但我遇到了一个非常不愉快的情况 捕获我的桌面流的代码如下 let chooseScreen document quer
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • JS 中的 .Jar 文件

    有谁知道如何在 JS 中访问 jar 文件 我已经用 Java 创建了类并作为 jar 文件导入 我想从 JS 文件访问该类 大家好 我感谢你们所有人 我尝试在 Firefox XUL 中使用 JS 列出文件夹中的文件 但我做不到 然后我决
  • Mocha 测试对原生 ES6 模块的“esm”支持

    有一个很棒的帖子 使用 Mocha 和 esm 测试原生 ES 模块 https web archive org web 20220318155753 https alxgbsn co uk 2019 02 22 testing nativ
  • 如何判断CKEditor是否已加载?

    如何确定 CKEditor 是否已加载 我查看了API文档 但只能找到loaded事件 我想检查 CKEditor 是否已加载 因为如果我第二次加载它 我的文本区域就会消失 The loaded活动对我不起作用 instanceReady
  • HttpRequest 和 XMLHttpRequest 之间的真正区别

    阅读前注意事项 这不是重复的xmlhttprequest 和 httprequest 之间的区别是什么 https stackoverflow com questions 8499062 what are differences betwe
  • 将纬度/经度转换为 X/Y,以便在美国地图图像上进行阿尔伯斯投影

    我正在尝试使用 C 或 Javascript 将纬度 经度转换为 X Y 坐标 以将带有 CSS 的 div 左 上 定位到美国地图的背景图像上 美国的标准地图投影是阿尔伯斯投影 如下所示 但 StackOverflow 仅提供参考基本墨卡
  • 解析器阻塞与渲染阻塞

    我一直在阅读有关优化网络性能的 Google 开发人员文档 我对那里使用的术语有点困惑 CSS 和 JavaScript 文件都会阻止 DOM 构建 但是 CSS 被称为渲染阻塞 而 JavaScript 被称为解析器阻塞 解析器阻塞 和
  • Dojo require,模块加载失败时连接错误

    当我尝试加载不存在的模块时 它失败并出现 404 错误 当然 我想处理此错误 但不知道如何连接到 错误 事件 根据 Dojo 文档 我应该能够使用它的微事件 API http livedocs dojotoolkit org loader
  • Angular 计算 HTML 中的百分比

    我试图在 HTML 中显示百分比值 如下所示 td myvalue totalvalue 100 td 它可以工作 但有时它会给出一个很长的小数 这看起来很奇怪 如何四舍五入到小数点后两位 有更好的方法吗 您可以使用过滤器 如下所示杰夫约翰
  • Google Hangouts 扩展程序如何创建面板窗口?

    The Doc http code google com chrome extensions windows html说如果你想创建一个面板窗口 你应该使用 chrome windows create type panel function

随机推荐

  • 【网络编程】深入理解TCP协议一(三次握手四次挥手、标记位、确认应答机制、超时重传机制)

    TCP协议 1 三次握手四次挥手 2 TCP协议段格式 3 标记位介绍 4 确认应答机制 5 超时重传机制 1 三次握手四次挥手 当客户端发起连接请求时 SYN需要被设置位1 告诉服务器客户端希望建立一个链接 服务器收到响应之后会回复 SY
  • VUE项目中引入JS文件的几种方法

    在开发Vue项目的时候 有时需要使用一些非ES6格式的没有export的js库 可以有如下方法实现 1 在index html页面使用script标签引入 当然也可以使用cdn的地址 这样引入后的内容是全局的 可以在所有地方使用
  • 《区块链助力粤港澳大湾区一体化发展报告(2022)》发布

    7月19日 中国 深圳 综合开发研究院主办的 数 链 大湾区 区块链助力粤港澳大湾区一体化发展报告 2022 发布会在深圳举行 报告提出 以区块链为代表的数字技术在破解粤港澳大湾区制度差异坚冰 支撑实体经济跨越和赋能社会治理创新等方面能够发
  • Mybatis对数据库数据的查询

    简单类型的映射 返回的是简单基本类型 接口中的定义 int getAdminCount 返回数据库总共还几条数据 xml中具体的实现
  • 解决Android App启动页背景图片拉伸变形问题

    为什么80 的码农都做不了架构师 gt gt gt 最近在开发的时候 在个别手机上遇到APP启动页背景图片被拉伸的情况 不多说 直接上图 然而我设置的背景图片是长这样 解决方法很简单 就是将主题中的单一背景图片以drawable的方式实现
  • SpringBoot世上最简洁的概况说明

    转自 SpringBoot世上最简洁的概况说明 下文笔者讲述SpringBoot的简介说明 如下所示 SpringBoot简介 SpringBoot是一个基于Spring框架开发的一个服务框架 使用SpringBoot可简化配置 达到开箱即
  • 从视频中提取音频数据,然后应用傅里叶对音频降噪(python)

    视频准备 QQ有热键 然后随便打开一个视频网站进行录屏 我选择B站 从视频中提取音频 需要安装包moviepy pip install moviepy 提取代码 from moviepy editor import video VideoF
  • Tomcat 目录列表···webloigc 目录列表···Weblogic修改端口号

    Tomcat web xml
  • PyCharm专业版破解

    0x01 下载JetbrainsCrack的jar包 下载链接 链接 百度云链接 提取码 8u4c 0x02 把JetbrainsCrack的jar包放入pycharm文件下的bin目录中 0x03 加上必要的文件代码 在bin目录下使用记
  • 题11:最短摘要的生成

    题目 Alibaba笔试题 给定一段产品的英文描述 包含M个英文单词 每个英文单词以空格分隔 无其他标点符号 再给定N个英文单词关键字 请说明思路并编程实现方法 String extractSurmary String descriptio
  • crout分解计算例题_化学方程式计算你真学会了吗?

    先看看视频 听听姚老师教的计算步骤吧 例题1 加热分解6 3g高锰酸钾 可以得到多少克氧气 分析 这道题是已知反应物的质量来求生成物的质量 即已知原料的质量求产品的质量 我们一起来看课本中的解题步骤 解 设加热分解6 3g高锰酸钾 可以得到
  • Java学习——String

    在上一篇我们讲到了一个必要重要的知识点 那就是Java中的类和对象 我们可以点击下面的链接来进行复习 CSDNJava学习 类和对象 上 AlwaysBeMyself的博客 CSDN博客CSDN 今天我们来讲下一个知识点 那就是Java中的
  • shift+空格,英文字母间距变大,半角全角转换

    shift 空格半角全角快捷键
  • 一文读懂舵机工作原理并运用(附代码)

    杂谈 自己拿到这一模块是也挺迷茫的 后来看了一些资料 也渐渐积累了些自己的理解 很多博文并没有将舵机讲明白 至少你待把PWM与角度如何换算讲清楚吧 所以笔者写这篇博文供大家学习掌握 如果你拿到一个舵机 该咋办 莫慌 往下看 第一步先要区分这
  • 【机器学习】树模型决策的可解释性与微调(Python)

    一 树模型的解释性 集成学习树模型因为其强大的非线性能力及解释性 在表格类数据挖掘等任务中应用频繁且表现优异 模型解释性对于某些领域 如金融风控 是极为看重的 对于树模型的解释性 我们常常可以通过输出树模型的结构或使用shap等解释性框架的
  • Jave Web 03 Cookie、Session

    1 会话 一个网站 如何证明你来过 客户端 服务端 服务端给客户端一个 信件 客户端下次访问服务端带上信件就可以了 cookie 服务器登记你来过了 下次你来的时候我来匹配你 seesion 2 保存会话的两种技术 1 cookie 客户端
  • Python爬虫入门教程!手把手教会你爬取网页数据

    其实在当今社会 网络上充斥着大量有用的数据 我们只需要耐心的观察 再加上一些技术手段 就可以获取到大量的有价值数据 这里的 技术手段 就是网络爬虫 今天就给大家分享一篇爬虫基础知识和入门教程 什么是爬虫 爬虫就是自动获取网页内容的程序 例如
  • 详解STM32 GPIO口中的推挽输出和开漏输出

    推挽输出 GPIO引脚线路经过两个保护二极管后 向上流向 输入模式 结构 向下流向 输出模式 结构 先看输出模式部分 线路经过一个由P MOS和N MOS管组成的单元电路 这个结构使GPIO具有了 推挽输出 和 开漏输出 两种模式 所谓的推
  • EduCoder_web实训作业--JavaScript学习手册九:字符串的常用方法

    第一关 请在此处编写代码 Begin var c a indexOf b var sum 0 while c gt 0 sum c c a indexOf b c b length return sum End 第二关 请在此处编写代码 B
  • jquery动态给下拉框select添加option

    jquery动态给下拉框select添加option 注意 有的框架如layui 需要额外添加form render 否则会失效