例:点開ドロップダウンリスト選択内容

10567 ワード

<style type="text/css">
*{ margin:0px auto; padding:0px}
#xiala{ width:200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}
#xiala:hover{ cursor:pointer}
.list{ width:200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-width:0px; display:none}
.list:hover{ cursor:pointer; background-color:#63C; color:white;}
style>
head>

<body>
<br />
<div style="width:500px; height:500px;">

    <div id="xiala" onclick="showa()">div>
    <div class="list" onclick="xuan(this)"> div>
    <div class="list" onclick="xuan(this)"> div>
    <div class="list" onclick="xuan(this)"> div>
    <div class="list" onclick="xuan(this)"> div>
    <div class="list" onclick="xuan(this)"> div>
    
div>
<script type="text/javascript">
function showa()
{
    var list = document.getElementsByClassName("list");
    for(var i=0; i<list.length;i++)
    {
        list[i].style.display = "block";
    }
}

function xuan(a)
{
    var nr = a.innerHTML;
    document.getElementById("xiala").innerHTML=nr;
    
    var list = document.getElementsByClassName("list");
    for(var i=0; i<list.length;i++)
    {
        list[i].style.display = "none";
    }
}
script>
body>

 
転載先:https://www.cnblogs.com/claricre/p/6061836.html