zoukankan      html  css  js  c++  java
  • JavaScript做DIV下拉列表

    1.设置下拉列表:

    2.设置“menu”默认为隐藏:     display:none;

    3.给“sel”添加点击(onclick)事件:点击显示“menu”

    4.给menu中的各项(item)添加点击事件:点击item隐藏“menu”,并把点击的item的值放在“sel”上显示

        <div id="wai">
            <div id="sel">请选择</div>
            <div id="menu">
                <div class="item" onclick="selected(this)">山东</div>
                <div class="item" onclick="selected(this)">山西</div>
                <div class="item" onclick="selected(this)">河南</div>
                <div class="item" onclick="selected(this)">河北</div>
                <div class="item" onclick="selected(this)">湖南</div>
                <div class="item" onclick="selected(this)">湖北</div>
            </div>
        </div>
     <script type="text/javascript">
         //给“sel”添加点击事件:点击 显示下拉列表
         var s = document.getElementById("sel");
        s.onclick = function(){
            var a = document.getElementById("menu");
            a.style.display = "block";
        }
        
        function selected(a){
            //下拉选项显示后,给”item“添加点击事件:点击隐藏下拉列表
            var b = document.getElementById("menu");
            b.style.display = "none";
            //讲选中项的值放到“sel“里显示
            var txt = a.innerText;
            document.getElementById("sel").innerText = txt;
        } 
     </script>
  • 相关阅读:
    nginx+tomcat配置websocket反向代理
    jmter 参数化
    postman 自动化
    python yaml文件读写
    python redis 操作
    pycharm 连接github操作
    校验身份证号
    python faker 造数据
    pandas处理日期相关的操作
    python的time几种用法strptime、strftime、localtime、mktime
  • 原文地址:https://www.cnblogs.com/rose1324/p/8000599.html
Copyright © 2011-2022 走看看