未实现任何功能之前：

实现功能之后：

实现该功能的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. 第一天 Linux基础篇

    课程介绍 1.认识Linux的不同版本 2.以及应用领域 3.文件和目录 4.Linux命令概述 5.Linux命令-文件 6.Linux命令-系统管理-磁盘管理 认识Linux 什么是操作系统  生 ...

  2. Nginx参数调优

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  3. mac 安装geckodriver和chromedriver

    Last login: Fri Apr :: on ttys000 (base) localhost:~ ligaijiang$ env TERM_PROGRAM=Apple_Terminal SHE ...

  4. Java后台+数据库+Java web前端（新手）

    实现简单页面上对数据的增删改查:Java后台+数据库表+Jsp前端网页设计 这里做一个简单的学生课程信息管理系统,做之前一定要先有自己的思路,要不然对新手来说,很容易乱的. 另有一完整的代码可供参考, ...

  5. python SMTP attachment

    发邮件,现在还有不带附件的吗? 开个玩笑,你要带,就得如此下边这样办 //test.py import smtplib from email.mime.text import MIMEText fro ...

  6. cocos2d-x JS 弹出对话框触摸监听（吞噬点击事件遮挡层）

    在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制. 根据官方文档,我们可 ...

  7. unity3d-代码控制游戏角色控制器移动

    先上一个gif看看效果.因为图片大小限制.所以录制的比较小.个人认为效果比较牵强.特别是里面的逻辑代码. 不过我还是认为一切是为了先实现,因为我是刚接触的新手. 工程结构图 这次实现的效果是: 1:摄 ...

  8. 实验验证sys和system用户全库导出的区别

    我们在做逻辑数据泵全库导出的时候,有两种流行的写法,一种是sys用户导出,一种是使用system用户导出. 现在想知道二者之间有什么区别?实验验证之前不妨先思考一下: sys和system用户的权限区 ...

  9. servlet 的servletContext

  10. ubuntu 安装/卸载nginx及常用命令

    安装命令 sudo apt-get update #更新apt sudo apt-get install nginx #安装nginx 启动/重启/停止命令 一. /etc/init.d/nginx ...