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>