未实现任何功能之前：

实现功能之后：

实现该功能的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. 如何使用向量代表文档doc或者句子sentence

    1.“句向量”简介word2vec提供了高质量的词向量,并在一些任务中表现良好. 关于word2vec的原理可以参考这几篇论文: https://arxiv.org/pdf/1310.4546.pdf ...

  2. openshift node资源限制

    在oc的node配置文件中添加 ...... kubeletArguments: cgroups-per-qos: - "true" cgroup-driver: - " ...

  3. 项目发布脚本-nodejs

    #!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin clear printf &q ...

  4. [Java in NetBeans] Lesson 11. While Loops

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有:(the same use in C/C++) 1. while loop while(i < max){} will keep ...

  5. php 实现php代码的加密解密

    php 代码加密类,大家可以根据自己的需求进行修改,原类如下,是对之前的加密解密类的有一次修改,希望能分享给大家.本次在ubuntu下测试没有问题,与之前的版本的区别在于,这次的版本更加的通用性. & ...

  6. iOS 新浪微博-3.0 新特性

    每个程序在第一次启动的时候,都会显示新特性.效果如下: 思路: 添加一个ViewController,里面放两个View,一个是UISrollView,另一个pageControl 往UISrollV ...

  7. java的输入输出

    import java.util.Scanner; public class TestScanner { public static void main(String[] args) { Scanne ...

  8. 【转载】C# 中的委托和事件(详解：简单易懂的讲解)

    本文转载自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委托和事件(详解) C# 中的委托和事件 委托和事件在 ...

  9. jQuery-设计模式

    [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 五.元素的操作:移动 六.元素的操作:复制.删除和创建 七.工具方法 八.事件操作 九.特殊效果 [正文] 一.选 ...

  10. python拼接变量、字符串的3种方法

    第一种,加号(“+”): print 'py'+'thon' # output python str = 'py' print str+'thon' # output python 第二种 ,空格: ...