js改变下拉框内容 20256311编辑
Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注
资深码农+深耕理财=财富自由
欢迎关注
js改变下拉框内容
Created by Marydon on 2018-04-08 18:52
适用场景:通常情况下,级联菜单、通过ajax异步获取后台数据改写下拉框内容会有这种需求
实现方式:通过jQuery实现
HTML片段
编程语言: <select id="test"> <option value="">--请选择--</option> <option value="1">javascript</option> <option value="2">jquery</option> </select> <input type="button" value="点击改变下拉选项" onclick="changeOptionContent3();"/>
js代码
/** * 方式一:推荐使用 */ function changeOptionContent() { var optionTags = '<option value="3">java</option>' +'<option value="4">oracle</option>'; // 将下拉框中除了第一个选项,全部移除 $('#test option:gt(0)').remove(); // 为下拉框拼接子标签 $('#test').append(optionTags); }; /** * 方式二:使用html() */ function changeOptionContent2() { // 初始化 var optionTags = '<option value="">--请选择--</option>'; // 标签内容 optionTags += '<option value="3">java</option>' +'<option value="4">oracle</option>'; // 重写下拉框的内容 $('#test').html(optionTags); }; /** * 方式三:使用empty() */ function changeOptionContent3() { // 1.置空 $('#test').empty(); // 2.拼接 var optionTags = '<option value="">--请选择--</option>'; $('#test').append(optionTags); optionTags = '<option value="3">java</option>' +'<option value="4">oracle</option>'; $('#test').append(optionTags); };
相关推荐:
与君共勉:最实用的自律是攒钱,最养眼的自律是健身,最健康的自律是早睡,最改变气质的自律是看书,最好的自律是经济独立 。
您的一个点赞,一句留言,一次打赏,就是博主创作的动力源泉!
↓↓↓↓↓↓写的不错,对你有帮助?赏博主一口饭吧↓↓↓↓↓↓
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/8746721.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 我干了两个月的大项目,开源了!
· 推荐一款非常好用的在线 SSH 管理工具
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· 千万级的大表,如何做性能调优?
· .NET周刊【1月第1期 2025-01-05】