• 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>

  • 相关阅读:
    Unity ECS最新DOTS环境搭建教程
    Groovy单元测试
    【多线程进阶】synchronized 原理
    Collections.addAll()和list.addAll()不同之处说明
    OpenCV的应用——快递二维码识别
    OpenGL笔记五之VBO与VAO
    MATLAB算法实战应用案例精讲-【集成算法】集成学习模型Boosting(附MATLAB、R语言和Python代码实现)
    [MRCTF2020]Ezpop
    【群智能算法改进】一种改进的鹈鹕优化算法 IPOA算法[2]【Matlab代码#58】
    凭此五点 这款信创传输系统解决了传输的迫切需求
  • 原文地址:https://blog.csdn.net/u013558123/article/details/136159746