jQuery 如何向 select 选项框中添加新选项, 即如何向 select 元素中添加 options 元素? 下面本篇文章就来给大家介绍一下向 select 元素添加 options 的方法, 希望对大家有所帮助.
可以先使用 jQuery 选择器获取 select 对象, 然后使用 append() 方法给对象中添加 options 标签元素.
append() 方法可以将指定的内容插入 jQuery 集合的最后一个子集合.
[相关教程推荐: jQuery 教程 https://www.html.cn/jskuangjia/jquery/ ]
语法:
$('#selectBox').append(`${optionText}`)
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 如何使用 jQuery 向 select 元素中添加 options?</title>
- </head>
- <body>
- <h2 style="color: green"> 使用 jQuery 向 select 元素中添加 options</h2>
- <p>
从给定选项中选择一个:
- <select id="select">
- <option value="free">Free</option>
- <option value="basic">Basic</option>
- </select>
- </p>
- <p > 单击下面的按钮, 向选择框添加一个选项.</p>
- <button onclick="addOption()"> 添加 option</button>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- <script type="text/javascript">
- function addOption() {
- optionText = 'Premium';
- optionValue = 'premium';
- $('#select').append(`<option value="${optionValue}"> ${optionText} </option>`);
- }
- </script>
- </body>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16418.html