js--下拉列表选中(js和jquery两种方法 )

来源：互联网发布：sql 注入 1 2 编辑：程序博客网时间：2024/04/30 21:42

  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<span class="bind_font">我不是90后...</span><img src="img/select.png" class="arrow">
    <ul class="select" >
            <li class="li">我是50后</li>
            <li class="li">我是60后</li>
            <li class="li">我是70后</li>
            <li class="li">我是80后 <img src="img/right.png" class="right_img"></li>
            <li class="li">我是90后</li>
            <li class="li">我是00后</li>
    </ul>
$(function(){ 
    $('#birth').click(function(){
      if ($(".select").is(':hidden')) {
      $(".select").fadeIn(); 
      }else{
$(".select").fadeOut();
      
      
      };
          
    });//不能事件嵌套事件
    $(".li").bind("click",function(e) {   //事件代理
       console.log(e.target.innerHTML);//测试
       $(".li img").remove();
       $(".bind_font").html(e.target.innerHTML);
       $(this).append("<img src='img/right.png' class='right_img'>");
    });  
});
第二种纯js编码：innerHTML可以用textContent代替
              querySelector、querySelectorAll（html5、DOM选取元素）
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>下拉列表</title>
</head>
<style>
*{margin:0 auto; padding:0px; text-align:center;}
ul,li{list-style:none;}
.div2{ position:relative; background:#ccc;width: 200px;height: 30px;line-height:30px;}
#showul{color: white;width: 2px;height: 2px;right:26px; position:absolute;}
ul li { background:#eee;width: 200px;height: 30px; line-height:30px;}
ul li:hover {color: #fff; background:#71adaa; }
</style>
<body>   
    <div class="div2">
   <span class="content">My box </span><span id="showul" >▼</span>
</div>
    <ul id="testul" style="display:none">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>
<script>
var show= document.querySelector(".div2"),
    showul=document.querySelector("#showul"),
    content=document.querySelector(".content"),
    testul = document.querySelector("#testul");
show.addEventListener('click', function(e) {
    switch (testul.style.display) {
        case 'block':
            showul.innerHTML = "▼";
            testul.style.display = 'none';
            break;
        case 'none':
            showul.innerHTML = "▲";
            testul.style.display = 'block';
            break;
    }
}, false);
testul.addEventListener('click', function(e) {
    showul.innerHTML = "▼";
    testul.style.display = 'none';
    content.innerHTML = e.target.innerHTML;
}, false);
</script>
</html>

0 0