初學js---下拉列表
點擊藍框出現可選擇的下拉列表，鼠標以上下拉列表，列表顯示，移出，列表隱藏，點擊需要選擇的值課實現交換：
1.顯示與隱藏下拉列表只需要在點擊藍框時改變下拉框的display即可；
2.鼠標移到下拉框與移出下拉框的下拉框的顯示與隱藏效果，只需通過onmouseover和onmouseout函數改變下拉框的display屬性；
3.主要是要實現值得交換：這裏通過事件監聽，給每一個下拉框中的li綁定一個點擊事件，使點擊某一個li時，藍框中的值變為對應的li中的值。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>234</title>
<link rel="stylesheet" type="text/css" href="css/6.css">
<script type="text/javascript">
var i=1;
function block1()
{
var mydiv=document.getElementById(‘a‘);
if (i%2==1) {
mydiv.style.display="block";
}
if (i%2==0) {
mydiv.style.display="none";
}
i++;
}
</script>
<script >
function mOver()
{
document.getElementById(‘a‘).style.display="block";
}
function mOut()
{
document.getElementById(‘a‘).style.display="none";
}
</script>
</head>
<body>
<div class="select_list w_160 lfloat">
<div class="src" onclick="block1()"><img src="img/1.jpg" height="37px"/></div>
<span id="b" class="select_value" onclick="block1()">2014</span>
<div id="a" class="select_ul" style="display: none;">
<ul id="c" onmouseover="mOver()" onmouseout="mOut()">
<li >2014</li>
<li >2003</li>
<li >2004</li>
<li >2005</li>
<li >2006</li>
<li >2007</li>
<li >2008</li>
<li >2009</li>
<li >2010</li>
<li >2011</li>
<li >2012</li>
<li >2013</li>
<li >2014</li>
<li >2015</li>
<li >2016</li>
<li >2017</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){ //winodw.onload表示頁面一加載後面的函數就發生
var x=document.getElementById("c").getElementsByTagName("li");
for(var i=0;i<x.length;i++){
x[i].addEventListener(‘click‘,my,false);
function my(e){
var x=e.target;
document.getElementById(‘b‘).innerHTML=x.innerHTML;
};
}
}
</script>
</body>
</html>
初學js---下拉列表