html中如何实现省市

html-css018

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#那种 只能数字做下标

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