初學js---下拉列表

時間 2019-11-11

原文原文鏈接

點擊藍框出現可選擇的下拉列表，鼠標以上下拉列表，列表顯示，移出，列表隱藏，點擊須要選擇的值課實現交換：javascript

1.顯示與隱藏下拉列表只須要在點擊藍框時改變下拉框的display便可；css

2.鼠標移到下拉框與移出下拉框的下拉框的顯示與隱藏效果，只需經過onmouseover和onmouseout函數改變下拉框的display屬性；html

3.主要是要實現值得交換：這裏經過事件監聽，給每個下拉框中的li綁定一個點擊事件，使點擊某一個li時，藍框中的值變爲對應的li中的值。java

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>234</title>
 6 <link rel="stylesheet" type="text/css" href="css/6.css">
 7 <script type="text/javascript">
 8 var i=1;
 9 function block1()
10 {
11 var mydiv=document.getElementById('a');
12 if (i%2==1) {
13 mydiv.style.display="block";
14 }
15 if (i%2==0) {
16 mydiv.style.display="none";
17 }
18 i++;
19 }
20 </script>
21 <script >
22 function mOver()
23 {
24 document.getElementById('a').style.display="block";
25 }
26 function mOut()
27 {
28 document.getElementById('a').style.display="none";
29 }
30 </script>
31 
32 </head>
33 <body>
34 <div class="select_list w_160 lfloat">
35 <div class="src" onclick="block1()"><img src="img/1.jpg" height="37px"/></div>
36 <span id="b" class="select_value" onclick="block1()">2014</span> 
37 <div id="a" class="select_ul" style="display: none;">
38 <ul id="c" onmouseover="mOver()" onmouseout="mOut()">
39 <li >2014</li>
40 <li >2003</li>
41 <li >2004</li>
42 <li >2005</li>
43 <li >2006</li>
44 <li >2007</li>
45 <li >2008</li>
46 <li >2009</li>
47 <li >2010</li>
48 <li >2011</li>
49 <li >2012</li>
50 <li >2013</li>
51 <li >2014</li>
52 <li >2015</li>
53 <li >2016</li>
54 <li >2017</li>
55 </ul>
56 
57 </div>
58 
59 </div>
60 <script type="text/javascript">
61 window.onload=function(){ //winodw.onload表示頁面一加載後面的函數就發生
62 var x=document.getElementById("c").getElementsByTagName("li");
63 for(var i=0;i<x.length;i++){
64 x[i].addEventListener('click',my,false);
65 
66 function my(e){
67 var x=e.target;
68 document.getElementById('b').innerHTML=x.innerHTML;
69 };
70 }
71 }
72 </script>
73 </body>
74 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。