如何使用JavaScript实现动态修改select下拉框选项？

本文共计679个文字，预计阅读时间需要3分钟。

在前端设计中，下拉框表单自然不会少。经常需要使用下拉框选择项，或动态展示数据到下拉框中。然而，之前使用optgroup标签时遇到了问题，没有找到详细可行的解决方案。

相信在前端设计中必然不会少的了表单，因为经常会使用到下拉框选项，又或是把数据动态回显到下拉框中。因为之前牵扯到optgroup标签时遇到了问题，没查到太过详细的解决方案，自己动手操作记录一下。

首先就是咱们的老朋友"select"标签，因为需要js、jq两种操作，所以就定义两个select标签。

HTML代码：

<div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 20px;background-color: pink;"> <select id="mySelect1" style="width: 120px;"></select> <select id="mySelect2" style="width: 160px;"></select> <button id="addSelect2">添加</button> <!-- 此处用于点击动态添加到mySelect2 --> </div>

之后就是引用jq，定义js、jq操作，代码我都贴下面了。