当前位置：首页 > 编程笔记 >

js实现省市级联效果分享

董和风

2023-03-14

本文向大家介绍js实现省市级联效果分享，包括了js实现省市级联效果分享的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了js实现省市级联效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript">
    var shengArr =new Array();
    shengArr["广东"]=["广州","深圳","珠海","汕头","韶关"] ;
    shengArr["湖南"]=["长沙","张家界","株洲","怀化","常德"] ;
    shengArr["湖北"]=["武汉","荆州","宜昌","黄冈","仙桃"] ;
    shengArr["安徽"]=["合肥","黄山"] ;
    shengArr["河南"]=["郑州","信阳","洛阳"] ;

    function getSheng(){
      var s =document.getElementById("sheng");

      for(var v in shengArr){
        s.add(new Option(v,v),null);
      }
    }
    function getCity(){
      var s =document.getElementById("sheng");
      var c =document.getElementById("city");
      var v=s.value;
      c.options.length =0;

      for(var i in shengArr[v]){ 
        c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
      }
    }
  </script>

  <!--页面加载时获取 省名-->
  <body onload="getSheng()"> 

    <!-- 改变省时匹配该省的城市名-->
    省：<select id="sheng" onchange="getCity()"> 
      <option>--请选择</option>
    </select>
    市：<select id="city"></select>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

类似资料：

请使用js实现一个省市县级联的效果

本文向大家介绍请使用js实现一个省市县级联的效果相关面试题，主要包含被问及请使用js实现一个省市县级联的效果时的应答技巧和注意事项，需要的朋友参考一下
JavaScript实现省市县三级级联特效

本文向大家介绍JavaScript实现省市县三级级联特效，包括了JavaScript实现省市县三级级联特效的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了js省市县三级级联特效的实现代码，供大家参考，具体内容如下主要思想 1.省改变，市改变，并初始化县 2.市改变，县改变 html代码主要步骤 1.获取元素对象 2.定义市和县的数组 3.定义全局变量 4.实现省份改变，市跟着变化
JS实现省市县三级下拉联动

本文向大家介绍JS实现省市县三级下拉联动，包括了JS实现省市县三级下拉联动的使用技巧和注意事项，需要的朋友参考一下纯JS实现省市县三级下拉联动，供大家参考，具体内容如下代码如下：效果如下如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。以上就是javascript实现省市区三级联动下拉框菜单的全部代码，希望对大家的学习有所帮助。
原生js实现省市区三级联动代码分享

本文向大家介绍原生js实现省市区三级联动代码分享，包括了原生js实现省市区三级联动代码分享的使用技巧和注意事项，需要的朋友参考一下前言插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star 准备页面中的容器标签不限制，只需给个id就行举个例子：如果传递的数组['provinces','citys','areas
jquery+ajax实现省市区三级联动效果简单示例

本文向大家介绍jquery+ajax实现省市区三级联动效果简单示例，包括了jquery+ajax实现省市区三级联动效果简单示例的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考，具体如下：一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了
使用python实现省市三级菜单效果

本文向大家介绍使用python实现省市三级菜单效果，包括了使用python实现省市三级菜单效果的使用技巧和注意事项，需要的朋友参考一下地区分三层结构例如: 大中华地区一级划分: 华东华中华北西南特别行政区华南 ------------------------------------------------- 请输入你要查看的大中华地区名字:华中 ------------------包含
Android实现省市区三级联动

本文向大家介绍Android实现省市区三级联动，包括了Android实现省市区三级联动的使用技巧和注意事项，需要的朋友参考一下针对AdapterView的拓展使用，Spinner实现省市区的三级联动，具体内容如下其主要是通过使用Spinner的setOnItemSelectListener来实现。代码示例： activity_main.xml MainActivity.java 运行结果：
jQuery实现的省市县三级联动菜单效果完整实例

本文向大家介绍jQuery实现的省市县三级联动菜单效果完整实例，包括了jQuery实现的省市县三级联动菜单效果完整实例的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了jQuery实现的省市县三级联动菜单效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：

相关阅读

使用python实现省市三级菜单效果 Android实现省市区三级联动 jQuery实现的省市县三级联动菜单效果完整实例 jquery实现的省市区三级联动 Vue.js组件tree实现省市多级联动

相关文章

招联数分暑期实习 JPA级联删除 JPA级联操作工行四川省分面试 JPA级联持久化

相关问答

javascript - 这种效果怎么实现？javascript - Bootstarp如何实现点击左右按钮，实现滑动分类效果？如何对文本产生省略号效果 three.js - 这种效果如何实现呢？css3 - CSS这种效果怎么实现?

相关工具

中国省市地区选择器读取txt并实现翻页效果瀑布效果，不同的实现方式中国省市选择器（含经纬度）下雪效果

相关文档

CSS Buttons 按钮效果常见 Web 特效实践 Redis 设计与实现如何实现自己的 jQuery 常用算法实现方法