初学js---下拉列表

最新推荐文章于 2023-09-27 21:55:53 发布

banshenjian0454

最新推荐文章于 2023-09-27 21:55:53 发布

阅读量216

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ayayi-666/p/9397912.html

版权

点击蓝框出现可选择的下拉列表，鼠标以上下拉列表，列表显示，移出，列表隐藏，点击需要选择的值课实现交换：

1.显示与隐藏下拉列表只需要在点击蓝框时改变下拉框的display即可；

2.鼠标移到下拉框与移出下拉框的下拉框的显示与隐藏效果，只需通过onmouseover和onmouseout函数改变下拉框的display属性；

3.主要是要实现值得交换：这里通过事件监听，给每一个下拉框中的li绑定一个点击事件，使点击某一个li时，蓝框中的值变为对应的li中的值。

 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>

转载于:https://www.cnblogs.com/ayayi-666/p/9397912.html

banshenjian0454

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学js---下拉列表

点击蓝框出现可选择的下拉列表，鼠标以上下拉列表，列表显示，移出，列表隐藏，点击需要选择的值课实现交换：1.显示与隐藏下拉列表只需要在点击蓝框时改变下拉框的display即可；2.鼠标移到下拉框与移出下拉框的下拉框的显示与隐藏效果，只需通过onmouseover和onmouseout函数改变下拉框的display属性；3.主要是要实现值得交换：这里通过事件监听，给每一个下拉...
复制链接

扫一扫