用div做下拉列表

Posted 2020-08-27 小太白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用div做下拉列表相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai1{ width:100px; height:35px; border:1px solid #666; text-align:center; vertical-align:middle; line-height:35px;}
#wai1:hover{ cursor:pointer;}
.xiang{ width:100px; height:35px; text-align:center; vertical-align:middle; line-height:35px; border:1px solid #666; border-top-width:0px; display:none;}
.xiang:hover{ cursor:pointer; background-color:#0F6}



</style>
</head>

<body>
<br />
    <div id="wai1" onclick="dianji()"></div>
    <div class="xiang" onclick="xuanzhong(this)">山东</div>
    <div class="xiang" onclick="xuanzhong(this)">淄博</div>
    <div class="xiang" onclick="xuanzhong(this)">淄川</div>
    <div class="xiang" onclick="xuanzhong(this)">张店</div>
    <div class="xiang" onclick="xuanzhong(this)">桓台</div>
</body>
</html>
<script type="text/jscript">

function dianji()
{
    var a = document.getElementsByClassName("xiang");    
        for(i=0;i<a.length;i++)
        {
            a[i].style.display = "block";
        }
}

function xuanzhong(b)
{
    var c = b.innerHTML;
    document.getElementById("wai1").innerHTML = c ;
    var a = document.getElementsByClassName("xiang");
        for(i=0;i<a.length;i++)
        {
            a[i].style.display = "none";
        }    
}
</script>













<!--<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>
</html>-->

以上是关于用div做下拉列表的主要内容，如果未能解决你的问题，请参考以下文章

用jquery设置下拉不可编辑，但是没起作用，求高手指点，急。。。