获取下拉菜单中具有SELECTED属性元素的序号和值的方法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7     <link rel="stylesheet" href="">
 8 </head>
 9 <body>
10     <form action="">
11         <p>
12             <label for="backgroundColor">选择背景色:</label>
13             <select id="backgroundColor">
14                 <option value="white" selected="selected">White</option>
15                 <option value="black">Black</option>
16             </select>
17         </p>
26 
27         <p>
28             <input type="button" id="previewButton" value="Preview">
29         </p>
30     </form>
31 
32 <script>
33     var bgColor = document.getElementById('backgroundColor');
34     var preview = document.getElementById('previewButton');
35 
36     var index = bgColor.selectedIndex;
37     var value = bgColor[index].value;
38 
39     preview.addEventListener('click',function(){
40         console.log(index);    //0
41         console.log(value);    //white
42     })
43     
44 </script>
45 </body>
46 </html>

posted @ 2019-07-22 10:22 xiadengqi 阅读(380) 评论(0) 收藏举报

刷新页面返回顶部