JavaScript获取select元素下的每一个option

最新推荐文章于 2024-05-15 22:15:39 发布

阅读量1w

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cckevincyh/article/details/53117133

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>

       <form name="form1" action="test.html" method="post" >
          <input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="传智播客5周年_2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="传智播客5周年_3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
       </form>

       <select name="edu" id="edu">
          <option value="博士">博士^^^^^</option>
          <option value="硕士">硕士^^^^^</option>
          <option value="本科" selected="selected" >本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
       </select> 
  </body>

  <script language="JavaScript">
    //获取select元素的引用
    var eduElement = document.getElementById("edu");
    //输出所有select元素下的所有option元素中对应的文本内容
    //例如:<option value="中专">中专^^</option>  输出--->中专^^
    //1 获取所有的option标签
    var optionElements = eduElement.getElementsByTagName("option");
    //2 遍历option
    for(var i = 0; i<optionElements.length; i++){
        var optionElement = optionElements[i];
        //3 每一个option的子元素
        var textElement = optionElement.firstChild;

        //4 子元素的nodeValue
        alert(textElement.nodeValue);
    }

  </script>
</html>

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取select元素下的每一个option

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="d
复制链接

扫一扫