用div做下拉列表

时间：2023-02-11 08:24:50
<!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>-->

相关文章