未实现任何功能之前：

实现功能之后：

实现该功能的jQuery核心代码：

<script>

        var provinceArr=new Array(5);

            provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市");

            provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");

            provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");

            provinceArr[3]=new Array("西安市","宝鸡市","延安");

            provinceArr[4]=new Array("菏泽市","济南市","青岛");

            $(function(){

                $("#province").change(function(){

                    $("#city").empty();//清空

                    var provinceID=this.value;

                    if(provinceID==-1){

                        $("#city").html("<option  value=\"-1\">--请选择--</option>");

                    }else{

                        for(var i=0;i<provinceArr[provinceID].length;i++){

                        var ption=document.createElement("option");//创建节点

                        console.log(ption);

                        ption.innerText=provinceArr[provinceID][i];

                        $("#city").append(ption);

                        }

                    }

                });

            })

        </script>

实现该二级省市联动的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jQuery实现省市联动</title>

         <script src="js/jquery-3.3.1.js"></script>

         <script>

         var provinceArr=new Array(5);

             provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市");

             provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");

             provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");

             provinceArr[3]=new Array("西安市","宝鸡市","延安");

             provinceArr[4]=new Array("菏泽市","济南市","青岛");

             $(function(){

                 $("#province").change(function(){

                     $("#city").empty();//清空

                     var provinceID=this.value;

                     if(provinceID==-1){

                         $("#city").html("<option  value=\"-1\">--请选择--</option>");

                     }else{

                         for(var i=0;i<provinceArr[provinceID].length;i++){

                         var ption=document.createElement("option");//创建节点

                         console.log(ption);

                         ption.innerText=provinceArr[provinceID][i];

                         $("#city").append(ption);

                         }

                     }

                 });

             })

         </script>

     </head>

     <body>

         <select id="province">

             <!--显示省份-->

             <option  value="-1">--请选择--</option>

             <option value="0">福建省</option>

             <option value="1"> 河南省</option>

             <option value="2">河北省</option>

             <option value="3">陕西省</option>

             <option value="4">山东省</option>

         </select>

         <select id="city">

             <!--显示市-->

             <option  value="-1">--请选择--</option>

         </select>

     </body>

 </html>

jQuery实现省市联动.html

当选择另一个省份时，把现有的城市清空，将更新为所选省份的的城市

$("#city").empty();//清空

创建节点是为了使省份的城市在option中显示

var ption=document.createElement("option");//创建节点

                        ption.innerText=provinceArr[provinceID][i];

                        $("#city").append(ption);

jQuery实现省市联动的更多相关文章

  1. jquery插件-省市联动

        由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个.     首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...

  2. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  5. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  6. Ajax省市联动

    以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  8. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  9. 练习: 省市联动(Ajax)

    // 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...

随机推荐

  1. [Java in NetBeans] Lesson 07. JavaDoc and Unit Tests

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. organize code into packages Create a package if want to make th ...

  2. maven 详解二

    转自 http://www.cnblogs.com/whgk/p/7121336.html 前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ss ...

  3. iOS UI进阶-1.1 Quartz2D 图片水印/裁剪/截图

    图片水印 UIImage+MJ.h #import <UIKit/UIKit.h> @interface UIImage (MJ) /** * 打水印 * * @param bg 背景图片 ...

  4. js中call，caller，callee，aplly

    1.函数的caller属性 (1).区分函数是在函数体调用还是顶层代码中调用:顶层中调用函数,该函数的caller属性返回null,在函数中调用,会返回调用发i函数的函数: <script> ...

  5. POJ1944 Fiber Communications (USACO 2002 February)

    Fiber Communications 总时间限制:  1000ms 内存限制:  65536kB 描述 Farmer John wants to connect his N (1 <= N ...

  6. sitecore系统教程之默认收集数据库MongoDB注意事项

    MongoDB是一个高度可扩展的基于文档的NoSQL数据库解决方案,Sitecore体验数据库(xDB)用于收集数据库.在安装MongoDB之前,您应该考虑以下事项: 确定您是需要基于公共云的解决方案 ...

  7. 大数据处理框架之Strom：redis storm 整合

    storm 引入redis ,主要是使用redis缓存库暂存storm的计算结果,然后redis供其他应用调用取出数据. 新建maven工程 pom.xml <project xmlns=&qu ...

  8. verilog代码基础

    verilog拼接符用法: https://zhidao.baidu.com/question/531343285.html wire [31:0] bit_mask = { {8{be[3]}}, ...

  9. python中常见的错误类型

    Python异常类 Python是面向对象语言,所以程序抛出的异常也是类.常见的Python异常有以下几个 ,大家只要大致扫一眼,有个映像,等到编程的时候,相信大家肯定会不只一次跟他们照面(除非你不用 ...

  10. TMC首秀：写作带给我生命的影响与感动

    蓦然回首,写作已陪伴了我十三个年头,横跨大学.读研.工作之初.直到现在.我将分四个小乐章,分享写作给我的生命带来的影响和感动. 第一乐章:治疗与励志 说起写作的缘由,虽然可以追溯到初高中时读过的一点文 ...