<!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做下拉列表的更多相关文章

  1. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  2. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. 两个重叠的div做前后翻转

    当需要做一个翻转卡片式的div时候,需要两个div的大小等大例如: 画出两个等大的div后,将他们重叠 图中的两个div做了重叠,做重叠时候用的属性是 position: absolute; 并且需要 ...

  4. 怎样用div做三角形

    20181204 用盒子模型做三角形的效果: <div></div> width:0px; height:0px; border:10px solid red; border- ...

  5. [css]display: table-cell，用div做分列布局

    table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...

  6. 学习笔记之08试用div做网页（滨院）-小作业

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. DIV做的Table

    <style> div.table{ border:1px solid #d7d7d7; margin-left:0px; border-bottom-width:; width:1200 ...

  8. XML做下拉列表

    5-18X.php主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. 用div加css做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

随机推荐

  1. UIKit控件直接显示网页文字内容

    NSString *html = @"<bold>Hello</bold> Now<br> <em>iOS</em> can cr ...

  2. 天天果园，中粮我买网等生鲜APP竞品分析

    奈何对生鲜行业的品类,价格,供应链不熟悉,想先从APP开始来了解生鲜行业和各个生鲜企业,若有不足之处,还望海量,也请帮忙指正. 选取了以下竞品:天天果园,易果生鲜,一米鲜,中粮我买网,爱鲜蜂,每日优鲜 ...

  3. php Memcached

    PHP 连接 Memcached 服务 在前面章节中我们已经介绍了如何安装 Memcached 服务,接下来我们为大家介绍 PHP 如何使用 Memcached 服务. PHP Memcache 扩展 ...

  4. 设置控件全局显示样式 appearance

    iOS5及其以后提供了一个比较强大的工具UIAppearance,我们通过UIAppearance设置一些UI的全局效果,这样就可以很方便的实现UI的自定义效果又能最简单的实现统一界面风格,它提供如下 ...

  5. cocos2d-js 帧序列动画

    1.resource.js var res = { playerWalk_plist:"res/playerWalk.plist", playerWalk_png:"re ...

  6. ViewPager滑动标签-PagerSlidingTabStrip的使用

    有篇博客写的已经非常详细,所以不再写了.主要在于导入这个Library,导入Library看自己的笔记 博客地址:http://doc.okbase.net/HarryWeasley/archive/ ...

  7. width为auto或者100%的区别

    一.四个理论 1. 某div不显示设置宽度,那么width为auto. 2. 某div的width在默认情况设置的是盒子模型中content的值 3. 某div的width为100%表示的是此div盒 ...

  8. elasticsearch 管理工具

    ------------------sense------------------- google chrome 浏览器插件,数据交互使用   -------------------------hea ...

  9. css初始化值

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,textarea,input,p,th,td,tr,table,tbody,thead,tfoot, ...

  10. 【转】在 2016 年做 PHP 开发是一种什么样的体验？（一）

    原文: https://www.v2ex.com/t/312651 在 2016 年做 PHP 开发是一种什么样的体验?(一) 嘿,我最近接到一个网站开发的项目,不过老实说,我这两年没怎么接触编程,听 ...