html中如何实现省市

html-css08

html中如何实现省市,第1张

是省市联动选择?写个简单的案例给你看看,使用请载入jquery文件,效果如图:

html如下:

<select id="province">

  <option>请选择省份</option>

  <option>北京</option>

  <option>上海</option>

  <option>江苏</option>

</select>

<select class="city">

  <option>请选择城市</option>

</select>

<select class="city">

  <option>东城</option>

  <option>西城</option>

  <option>崇文</option>

  <option>宣武</option>

  <option>朝阳</option>

</select>

<select class="city">

  <option>黄浦</option>

  <option>卢湾</option>

  <option>徐汇</option>

  <option>长宁</option>

  <option>静安</option>

</select>

<select class="city">

  <option>南京</option>

  <option>镇江</option>

  <option>苏州</option>

  <option>南通</option>

  <option>扬州</option>

</select>

jquery如下:

var currentShowCity=0

$(document).ready(function(){

  $("#province").change(function(){

    $("#province option").each(function(i,o){

      if($(this).attr("selected"))

      {

        $(".city").hide()

        $(".city").eq(i).show()

        currentShowCity=i

      }

    })

  })

  $("#province").change()

})

function getSelectValue(){

  alert("1级="+$("#province").val())

  $(".city").each(function(i,o){

    if(i == currentShowCity){

      alert("2级="+$(".city").eq(i).val())

    }

  })

}

这个叫做省市联动 要用二维数组

var arrsheng[]={"湖南","湖北"}

var arr["湖南"]={"株洲","长沙"}

选中第一个后 就能够获得 湖南 或者湖北这种值

然后 下一个框绑定的就是 arr["湖南"]这里面的元素

js支持 自动以下标 不像java c#那种 只能数字做下标

所以这种省市联动效果 就很简单了·

纯css打造的下拉菜单效果,兼容多浏览器,将以下代码复制,创建一个html文档即可预览,希望对你有所帮助,代码如下:

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<title>CSS下拉菜单 </title>

<style type="text/css">

*{margin:0padding:0}

#menu{font-size:12pxposition:relativez-index:100}

#menu ul{list-style:none}

#menu li {float:leftposition:relative}

#menu ul ul {visibility:hiddenposition:absoluteleft:3pxtop:23px}

#menu table {position:absolutetop:0left:0}

#menu ul li:hover ul,

#menu ul a:hover ul{visibility:visible}

#menu a{display:blockborder:1px solid #000background:#8192A6padding:2px 10pxmargin:3pxcolor:#ffftext-decoration:none}

#menu a:hover{background: #0FFcolor:#f00border:1px solid #00F}

#menu ul ul{}

#menu ul ul li {clear:bothtext-align:leftfont-size:12px}

#menu ul ul li a{display:blockwidth:100pxheight:13pxmargin:0border:0border-bottom:1px solid red}

#menu ul ul li a:hover{border:0background:#f2cdb0border-bottom:1px solid #00F}

</style>

</head>

<body>

<a href="#">站长特效网</a>

<hr>

<div id="menu">

<ul>

<li><a href="#">

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">一号站长特效</a></li>

<li><a href="#">二号站长特效</a></li>

<li><a href="#">三号站长特效</a></li>

<li><a href="#">四号站长特效</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">站长特效二号

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">站长一号特效</a></li>

<li><a href="#">站长二号特效</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">站长特效三号

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">站长一号特效</a></li>

<li><a href="#">站长一号特效</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">站长特效四号</a></li>

<li><a href="#">站长特效五号</a></li>

</ul>

</div>

</body>

</html>