主页 / 网络编程 /

JavaScript省市级联下拉菜单实例

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了JavaScript省市级联下拉菜单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：canvas实现十二星座星空图 下一篇：jqGrid翻页时数据选中丢失问题的解决办法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by