如何用JavaScript动态更改select下拉框选项？

本文共计676个文字，预计阅读时间需要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操作，代码我都贴下面了。