• html 动态设置下拉选项


            在HTML中,如果你想动态设置下拉选项(`元素中。
            如果你想在用户交互(如点击按钮)后动态添加选项,你可以将上述代码放入一个事件处理函数中:
            

    1. <button id="addOptions">添加选项</button>
    2. <script>
    3. document.addEventListener('DOMContentLoaded', function() {
    4.   document.getElementById('addOptions').addEventListener('click', function() {
    5.     var selectElement = document.getElementById('mySelect');
    6.     var option1 = document.createElement('option');
    7.     option1.value = 'value1';
    8.     option1.text = '选项 1';
    9.     selectElement.add(option1);
    10.   });
    11. });
    12. </script>


            在这个例子中,当用户点击按钮时,一个新的

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>动态清除下拉选项示例</title>
    6. <script>
    7. // 这个函数将在文档加载完成后执行
    8. document.addEventListener('DOMContentLoaded', function() {
    9.   // 获取<select>元素
    10.   var selectElement = document.getElementById('mySelect');
    11.   // 清除<select>元素中的所有<option>子元素
    12.   selectElement.innerHTML = '';
    13. });
    14. </script>
    15. </head>
    16. <body>
    17. <!-- 下拉菜单 -->
    18. <select id="mySelect">
    19.   <option value="value1">选项 1</option>
    20.   <option value="value2">选项 2</option>
    21.   <option value="value3">选项 3</option>
    22. </select>
    23. </body>
    24. </html>

  • 相关阅读:
    丁鹿学堂前端培训:typescript之抽象类和接口简介
    卡尔曼滤波(Kalman Filter)原理浅析-数学理论推导-2
    Path.Combine的坑
    MySQL的游标遍历
    基于Socket开发吃豆人联机游戏 课程设计 大作业
    【Redis】Redis-cli命令行工具解析与应用(Redis专栏启动)
    springboot微信点餐系统的设计与实现毕业设计源码221541
    上周热点回顾(11.21-11.27)
    矩池云 | GPU 分布式使用教程之 Pytorch
    SQL教程之 了解 SQL EXISTS 子句,当你应该考虑使用它时
  • 原文地址:https://blog.csdn.net/u013558123/article/details/136159746