<!--

需求:

	[1] 动态生成省份选择框。

	[2] 当选择了省份的某一项时, 动态改变

		城市选择中的列表项。

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>省市联动</title>

    <script src="../JS/jquery-1.8.3.min.js"></script>

    <script>

        var pros   = ['请选择省份','广东省','湖南省','四川省'];

        var cities = [

            [],

            ['广州','汕头','珠海','茂名','东莞','惠州'],

            ['株洲', '长沙', '衡阳', '常德'],

            ['成都', '达州', '锦阳', '南充']

        ];

        $( init );

        function init(){

            //{ps} 初始化省份的数据

            makeOptions( pros, $("#province") );

        }

        //{ps} 实现代码的复用

        //功能: 产生某个下拉列表的中的数据项。

        //返回: 没有返回值.

        //  arr: 这是一个数组 ==> 所有省份 / 某一个省份的所有城市

        //  $select: 一个下拉列表的 Jquery 对象

        function makeOptions( arr, $select ){

            for (var i = 0; i < arr.length; i++){

                //创建下拉列表

                var option = document.createElement("option");

                //把省份添加进去

                option.innerText = arr[i];

                //设置值，方便之后确定选择的是哪一个

                $(option).val(i);

                //把option添加进select中

                $select.append($(option));

            }

        }

        //{ps} 当省份的值发生改变, 触发以下的函数

        function updateCity(){

            //把内容清零，不然会一直拼接

            //city.options.length = 0;

            $("#city option").remove();

            makeOptions(cities[$("#province option:selected").val()],$("#city"));

           /* for (var i = 0; i < cities.length; i++){

                if ($("#province option:selected").val() == i){

                    for (var j = 0; j < cities[i].length; j++){

                        var option = document.createElement("option");

                        $(option).text(cities[i][j]);

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

                    }

                }

            }*/

        }

    </script>

</head>

<body>

    <select id="province" onchange="updateCity();"></select>

    <select id="city"></select>

</body>

</html>

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

  1. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  2. jquery插件-省市联动

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

  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. JavaOOP对象和封装

    对象: 前言: 在程序员眼中,世界万物皆为对象.世界上有两种人,一种是懂二进制的人,一种就是不懂二进制的人. 面向对象设计的过程就是抽象的过程. 步骤: 第一步:发现类 第二步:发现类的属性 第三步: ...

  2. Node.js 中文乱码解决

    Node.js 中文乱码解决 Node.js 支持中文不太好(实际上是Javascript支持),见<Node.js开发指南>. 要想Node.js正常显示中文,需要两点: 1.js文件保 ...

  3. 【CF1591】【数组数组】【逆序对】#759（div2）D. Yet Another Sorting Problem

    题目:Problem - D - Codeforces 题解 此题是给数组排序的题,操作是选取任意三个数,然后交换他们,确保他们的位置会发生改变. 可以交换无限次,最终可以形成一个不下降序列就输出&q ...

  4. 资源相关视图（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...

  5. java 、abstract修饰的【抽象类】【比如几何图形类】

    现实中问题引入 现实中一类具有共同特征的类,但是无法具体实现.,比如我们定义了一个几何类,叫做Shape,我们有一个方法要计算周长,直接在每个子类实现虽然可以,但是无法通过Shape定义的实例来访问到 ...

  6. 使用容器挂载NFS

    https://kubernetes.io/docs/concepts/storage/persistent-volumes/#persistent-volumes nfs 标准协议 v2 v3 v4 ...

  7. c++11之 algorithm 算法库新增 minmax_element同时计算最大值和最小值

    0.时刻提醒自己 Note: vector的释放 1. minmax_element 功能 寻找范围 [first, last) 中最小和最大的元素. 2. 头文件 #include <algo ...

  8. 【LeetCode】1470. 重新排列数组 Shuffle the Array (Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode-cn ...

  9. 【LeetCode】1021. Remove Outermost Parentheses 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcod ...

  10. Beautiful Walls

    [1553] Beautiful Walls 时间限制: 1000 ms 内存限制: 65535 K 问题描述 To simplify the building process, XadillaX b ...