js操作下拉标签select

最新推荐文章于 2022-07-06 10:10:14 发布

简单的绿竹

最新推荐文章于 2022-07-06 10:10:14 发布

阅读量417

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zunguitiancheng/article/details/46660149

版权

JS 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GBK">
       <title>Untitled Document</title>

       <style tyle="text/css">
           .clrclass{
               height:50px;
               width:50px;
               float:left;
               margin-right:30px;
           }
           #text{
               clear:left;
               margin-top:20px;
           }
           .selClass{
               width:100px;
           }
       </style>
   </head>
   <body>

       
       <script type="text/javascript">
           function changeColor(node){
               var colorVal = node.style.backgroundColor;

               document.getElementById("text").style.color = colorVal;
           }
       </script>
       <div class="clrclass" id="clr1" style="background-color:red" οnclick="changeColor(this)"></div>
       <div class="clrclass" id="clr2" style="background-color:green" οnclick="changeColor(this)"></div>
       <div class="clrclass" id="clr3" style="background-color:blue" οnclick="changeColor(this)"></div>
       <div id="text">
           需要显示效果的文字<br/>
           需要显示效果的文字<br/>
           需要显示效果的文字<br/>
           需要显示效果的文字<br/>
       </div>

       <hr/>


       <script type="text/javascript">
           function changeColor2(){

               var oSelectNode = document.getElementsByName("selectColor")[0];

               //获取所有的option。
               /*with (oSelectNode) {

                   var collOptionNodes = options;

                   alert(options[selectedIndex].innerHTML);
               }*/

               var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
               document.getElementById("text").style.color = colorVal;

//               for(var x=0;x<collOptionNodes.length; x++){
//                   alert(collOptionNodes[x].innerHTML);
//               }


           }
       </script>
       <select name="selectColor" οnchange="changeColor2()">
           <option value="black">选择颜色</option>
           <option value="red">红色</option>
           <option value="green">绿色</option>
           <option value="blue">蓝色</option>
       </select>
       <select name="selectColor2" οnchange="changeColor3()" class="selClass">
           <option style="background-color:black" value="black">选择颜色</option>
           <option style="background-color:red" value="red"></option>
           <option style="background-color:green" value="green">绿色</option>
           <option style="background-color:blue" value="blue">蓝色</option>
       </select>
   </body>
</html>