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>