未实现任何功能之前：

实现功能之后：

实现该功能的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. NgDL:第四周深层神经网络

    4.3核对矩阵维数 根据前向的矩阵,可以计算出右上的规律,对于第L层的w来说,其维数为(n[L],n[L-1]),n[L]表示第L层的单元数. 4.4为什么深层神经网络会好用? 如果要做一个人脸识别的 ...

  2. [LeetCode] 154. Find Minimum in Rotated Sorted Array II_Hard

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  3. testNG中dataprovider使用的两种方式

    testNG的参数化测试有两种方式:xml和dataprovider.个人更喜欢dataprovider,因为我喜欢把测试数据放在数据库里. 一.返回类型是Iterator<Object[]&g ...

  4. Ubuntu16.04源的问题

    今天执行下列语句 sudo apt-get update报错 安装redis时 sudo apt-get install redis-server报错 报错内容大致如下: 在网上查了一下是源的问题,我 ...

  5. 安装程序无法打开注册表项 UNKNOWN\Components\…的简单解决办法（转）

    安装程序无法打开注册表项 UNKNOWN\Components\…的简单解决办法 2018年04月16日 16:41:32 super_star_贤 阅读数:7193   在安装软件时(比如安装SQL ...

  6. vuex的使用二

    1.先看项目的目录结构 2.在main.js里需要引入store这个文件并挂在实例上 import store from './store/store' ............ new Vue({ ...

  7. teragen/terasort_简化版

    1, 关闭Hadoop安全模式 进入hdfs用户 su – hdfs Cd /opt/cloudera/parcels/CDH-5.12.1-1.cdh5.12.1.p0.3/bin hdfs dfs ...

  8. C#项目中关于多个程序集下App.config文件的问题

    在项目中我们会经常用到App.config文件,有的是自动生成的,比如引用webservice.wcf服务时生成:也有手动建立的配置文件直接默认名就为app.config.这些配置有的保存当前程序集用 ...

  9. nginx空白图片(empty_gif模块)

    用过百度统计的兄弟有没有注意到百度使用1x1的空白图片传递统计参数,自己做异步统计的兄弟是否使用静态文件来传递参数.为什么使用空白图片呢,而不是自己存放一张小图呢,nginx里面的空白图片是保存在内存 ...

  10. jdk8新特性-亮瞎眼的lambda表达式

    jdk8之前,尤其是在写GUI程序的事件监听的时候,各种的匿名内部类,大把大把拖沓的代码,程序毫无美感可言!既然Java中一切皆为对象,那么,就类似于某些动态语言一样,函数也可以当成是对象啊!代码块也 ...