🎃个人专栏:
🐬 算法设计与分析:算法设计与分析_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>