js练习 DIV做下拉列表

最新推荐文章于 2024-09-11 22:09:42 发布

weixin_34190136

最新推荐文章于 2024-09-11 22:09:42 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zxbs12345/p/7999569.html

版权

<html>
<head>
<meta charset="utf-8">
<title>下拉列表</title>
<style type="text/css">
　　*{margin:0px auto; padding:0;}
　　#wai{width:300px; height:300px;}
　　#txt{width:190px; height:30px; margin-top:20px; padding-left:5px; padding-right:5px; border:1px solid red; line-height:30px;}
　　#xl{width:202px; height:150px; display:none;}
　　.list{width:190px; height:30px;padding-left:5px; padding-right:5px; border:1px solid red; line-height:30px; border-top:none;}
</style>
</head>

<body>
    <div id="wai">
        <div id="txt">中国</div>
        <div id="xl">
            <div class="list">北京</div>
            <div class="list">上海</div>
            <div class="list">广州</div>
            <div class="list">浙江</div>
            <div class="list">山东</div>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    var txt = document.getElementById("txt");
    var xl = document.getElementById("xl");
    /*
        点文本框击显示下拉列表
    */
    txt.onclick = function()
    {
        xl.style.display = "block";
    }
    
    var list = document.getElementsByClassName("list")
    /*
        点击下拉列表选项，隐藏下拉列表并且点击的选项的文字显示在文本框内
    */
    for(var i=0;i<list.length;i++)
    {
        list[i].onclick = function()
        {
            xl.style.display = "none";
            txt.innerText = this.innerText;
        }
    }

</script>

转载于:https://www.cnblogs.com/zxbs12345/p/7999569.html

weixin_34190136

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js练习 DIV做下拉列表

<html><head><meta charset="utf-8"><title>下拉列表</title><style type="text/css">　　*{margin:0px auto; padding:0;}　　#wai{width:300px; height:300px;}　　#txt...
复制链接

扫一扫