网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript省市级联下拉菜单实例

JavaScript省市级联下拉菜单实例

作者:梵音与笙  发布时间:2024-04-10 16:18:18 

标签:js,省市级联

最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
 <option>请选择省份</option>
</select>
<select id="selCity">
 <option>请选择城市</option>
</select>
<script>
 function $(ID){
 return document.getElementById(ID);
 }
 var cityList=new Array();
 cityList['北京市']=['东城区','西城区','昌平区'];
 cityList['河北省']=['保定','石家庄','定州'];
  cityList['江苏省'] = ['南京市','苏州市','无锡市'];
  cityList['浙江省'] = ['杭州市','宁波市','温州市'];
  cityList['四川省'] = ['四川省','成都市'];
  cityList['海南省'] = ['海口市'];
 function changeCity(){
  var province=$("selProvince").value;
  var city=$("selCity");
   city.options.length=0;
  for (var i in cityList) {
  if(i==province){
   for (var j in cityList[i]) {
    city.add(new Option(cityList[i][j],cityList[i][j]),null);
   }
  }
  }
 }
 function allCity(){
  var province=$("selProvince");
  for (var i in cityList) {
   province.add(new Option(i,i),null);
  }
 }

window.onload=allCity;
</script>
</body>
</html>
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com