zoukankan      html  css  js  c++  java
  • 向下拉列表添加选项

    向下拉列表中添加选项:

    (1)首先得获取到下拉列表对象;

      var sel=document.getElementById("下拉列表id");

    (2)创建下拉列表选项;创建标签使用createElement("标签");

      var option=document.create("option");

      option.value="添加的选项value值";

      option.innerHTML="添加的选项内容";

    (3)将选项添加到下拉列表中;

      sel.appendChild(option);

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <title>复习</title>
     7 
     8     <script type="text/javascript">
     9 
    10         
    11         function addSelect(){//为下拉列表添加选项
    12         
    13             //1.通过id获取要添加选项的值
    14             var courseName=document.getElementById("courseName").value;
    15             
    16             //2.通过id获取下拉列表对象
    17             var sel=document.getElementById("select");
    18             
    19             //3.创建option
    20             var option=document.createElement("option");
    21             option.value=courseName;
    22             option.innerHTML=courseName;
    23             
    24             //4.将optiont添加到下拉列表中
    25             sel.appendChild(option);
    26         
    27         }
    28     
    29     </script>
    30 
    31 </head>
    32 
    33 <body>
    34 
    35     <input type="text" id="courseName"/>
    36     <input type="button" value="添加" onclick="addSelect()"/>
    37     </br>
    38     <select id="select" name="course">
    39         <option  value="">--请选择--</option>
    40     
    41     </select>
    42     
    43     
    44 </body>
    45 </html>
    View Code
  • 相关阅读:
    2020/11/15助教一周小结(第十一周)
    神经网络--理解
    案例一:鸢尾花数据的分类
    TF2基础知识
    软件工程助教工作总结
    软工课程改进建议
    2020-12-27 助教一周小结(第十七周)
    2020-12-20 助教一周小结(第十六周)
    2020-12-13 助教一周小结(第十五周)
    2020-12-06 助教一周小结(第十四周)
  • 原文地址:https://www.cnblogs.com/xuzhiyuan/p/7886217.html
Copyright © 2011-2022 走看看