🎃个人专栏：
🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客
🐳Java基础：Java基础_IT闫的博客-CSDN博客
🐋c语言：c语言_IT闫的博客-CSDN博客
🐟MySQL：数据结构_IT闫的博客-CSDN博客
🐠数据结构：数据结构_IT闫的博客-CSDN博客
💎C++：C++_IT闫的博客-CSDN博客
🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客
💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客
🥏python：python_IT闫的博客-CSDN博客
🐠离散数学：离散数学_IT闫的博客-CSDN博客
🥽Linux：Linux_Y小夜的博客-CSDN博客
🚝Rust：Rust_Y小夜的博客-CSDN博客
欢迎收看，希望对大家有用！
目录
🎯功能简介
🎯代码解析
🎯核心代码
🎯效果展示
🎯功能简介
这段代码实现了一个简单的功能：在页面加载完成后，用户可以点击按钮"添加选项"，动态向下拉菜单中添加选项。具体步骤如下：
1. 页面加载完成后，定义了一个包含多个文本值的数组`optArr`。
2. 当用户点击"添加选项"按钮时，会触发一个事件处理函数。
3. 事件处理函数首先获取id为`sel`的下拉菜单元素。
4. 然后检查下拉菜单中选项的数量（`obj1.length`）。如果下拉菜单中还没有选项（长度为0），则执行以下操作：
- 使用`for`循环遍历`optArr`数组中的每个元素。
- 对于每个数组元素，创建一个新的`Option`对象，文本内容为数组元素的值。
- 将新创建的选项添加到下拉菜单中。
5. 这样，点击一次"添加选项"按钮，就会将预定义的选项依次添加到下拉菜单中，但只会在下拉菜单为空的情况下执行添加操作。
🎯代码解析
<body> <fieldset> <legend>下拉框动态添加选项</legend> <select id="sel"></select> <button id="addOpt">添加选项</button> </fieldset> </body>这部分代码定义了一个简单的HTML结构，包括一个
<fieldset>，其内部有一个空的<select>元素和一个按钮。<script> window.onload = function () { var optArr = ['fg', 'sdf', 'sdf', '爱好交朋友', '爱好聊天', '爱好打游戏', '爱好睡觉']; document.getElementById("addOpt").onclick = function () { var obj1 = document.getElementById("sel"); console.dir(obj1.length); if (obj1.length == 0) { for (i = 0; i < optArr.length; i++) { var newoption = new Option(optArr[i]); obj1.add(newoption); } } } } </script>这段JavaScript代码实现了在用户点击按钮时向下拉菜单添加选项的功能。当页面加载完成后，点击"添加选项"按钮会触发一个事件，向id为
sel的下拉菜单中添加一系列选项。如果下拉菜单中已经存在选项，则不会再次添加。
🎯核心代码
<body>
<fieldset>
<legend>下拉框动态添加选项</legend>
<select id="sel"></select>
<button id="addOpt">添加选项</button>
</fieldset>
</body>🎯效果展示
