JavaScript省市级联下拉菜单实例

 更新时间:2017年02月14日 08:30:49   作者:梵音与笙  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序使用蓝牙小插件

    微信小程序使用蓝牙小插件

    这篇文章主要为大家详细介绍了微信小程序使用蓝牙小插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • HTML5+Canvas调用手机拍照功能实现图片上传(上)

    HTML5+Canvas调用手机拍照功能实现图片上传(上)

    这篇文章主要为大家详细介绍了HTML5+Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 原生js实现放大镜

    原生js实现放大镜

    本文主要分享了原生js实现放大镜效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 使用Vue3实现一个Upload组件的示例代码

    使用Vue3实现一个Upload组件的示例代码

    这篇文章主要介绍了使用Vue3实现一个Upload组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 实例讲解js验证表单项是否为空的方法

    实例讲解js验证表单项是否为空的方法

    这篇文章主要以实例方式向大家讲解了js验证表单项是否为空的方法,感兴趣的朋友可以参考一下
    2016-01-01
  • 如何自定义删除无依赖文件的webpack插件

    如何自定义删除无依赖文件的webpack插件

    通过自定义webpack插件,利用执行完成编译的封存阶段后,产生的产物module.fileDependencies,生成依赖的文件组,通过读文件的方式,将待扫描的文件组和有依赖关系的文件进行对比,这篇文章主要介绍了自定义删除无依赖文件的webpack插件,需要的朋友可以参考下
    2023-12-12
  • js精准计算

    js精准计算

    这篇文章主要介绍了js精准计算,对此感兴趣的同学,可以实验一下
    2021-04-04
  • 深入理解JavaScript内存管理和GC算法

    深入理解JavaScript内存管理和GC算法

    这篇文章主要介绍了深入理解JavaScript内存管理和GC算法,下面文章主要讲解JavaScript的垃圾回收机制以及常用的垃圾回收算法;还讲解了V8引擎中的内存管理,最后介绍了Performance工具如何使用
    2022-07-07
  • input的focus方法使用

    input的focus方法使用

    input有个focus方法,今天发现就在onblur事件里面起作用,onchang等事件中根本不起作用的
    2010-03-03
  • 使用JavaScript实现实时搜索建议功能

    使用JavaScript实现实时搜索建议功能

    在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
    2024-02-02

最新评论