html中如何实现省市

html-css020

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())

    }

  })

}

纯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>