未实现任何功能之前：

实现功能之后：

实现该功能的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. 【LeetCode每天一题】 Merge k Sorted Lists(合并K个有序链表)

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  2. centos5 升级到centos6

    From http://www.linuxquestions.org/questions/linux-newbie-8/yum-update-error-4175476250/ 对开发组的一个服务器执 ...

  3. js中变量提升（一个是变量，一个是函数表达式都会存在变量提升，函数声明不存在）

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  4. JavaScript 基础数组循环和迭代的几种方法

    JavaScript 数组循环和迭代   (之前一直没怎么注意数组循环,今天做一道题时,用到forEach循环发现它并没有按照我想象的样子执行,总结一下数组循环) 一.第一种方法就是for()循环   ...

  5. opencv之模糊处理

    初学OpenCV的开发者很容易被OpenCV中各种滤波方法所困扰,不知道到底该用哪里一个来做滤波.表面原因看起来是因为OpenCV中各种滤波方式实在是太多太杂, 其背后原因是对各种滤波方法的应用场景认 ...

  6. EL语言表达式 （三）【EL中的算术运算以及判断EL对象是否为空】

    一.EL中的算术运算 EL和其他语言一样,同样也提供了基本的算术运算(加.减.乘.除和取余),如下图. 运算符 功能 示例 结果 + 加 ${19+1} 20 - 减 ${66-30} 36 * 乘 ...

  7. TP图片上传

    //控制器文件 public function index(){ if(!empty($_POST)){ $file = $_FILES["file"]; if(!isset($f ...

  8. C# HtmlDocument和HtmlNode的使用以及节点的模糊查询

    C#HtmlAgilityPack.HtmlDocument和HtmlAgilityPack.HtmlNode的使用 HtmlAgilityPack.HtmlDocument response = n ...

  9. oauth2.0+app方式 webgis 授权

    .认证方式有三种 Oauth2.0, Token-based http/windows 二.用户登录与应用登录区别 两者区别在于:当用户登录时,服务器端平台是否直接识别登录信息和验证登录信息. 应用登 ...

  10. python2.7之乱码问题

    python 3之后当然不存在乱码问题了.python 2的乱码问题有时就有点头疼了.(代码均为在windows下测试) 示例:保存为test1.py 报错信息如下: 解决办法: 我将代码保存为tes ...