<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        var datas = {
            '广东': ['深圳', '广州'],
            '河南': ['郑州', '洛阳'],
            '湖北': ['武汉', '宜昌']
        }
        $(function () {

            var province = $('<select></select>').appendTo('body');
            province.change(function () {
                loadCity();
            });
            $.each(datas, function (key, value) {
                $('<option value="' + key + '">' + key + '</option>').appendTo(province);
            });
            var city = $('<select></select>').appendTo('body');
            loadCity();
            

            function loadCity() {
                city.empty();
                var citys = datas[province.val()];               
                $.each(citys, function (index, value) {
                    $('<option>' + value + '</option>').appendTo(city);
                });
            }

        });
    </script>
</head>
<body>

</body>
</html>

jQuery省市联动的更多相关文章

  1. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  2. jQuery省市联动（XML/JSON）

    准备: 导包 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 新建js文件夹导入jQuery配置文件 NO01:创建city.jsp页面 <%@ page lan ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. jquery插件-省市联动

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

  5. jQuery实现省市联动

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

  6. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  7. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

  8. Ajax省市联动

    以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

随机推荐

  1. 【u213&&t037】修剪花卉

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上 ...

  2. DbVisualizer的使用

    DbVisualizer的使用 一. Db工具的使用,怎么新建一个数据库连接? 新建一个数据库连接,点击 Tools > Connection Wizard 来新建一个数据库: 或者直接点击 + ...

  3. c头文件(.h)的作用

    C语言的著作中,至今还没发现把.h文件的用法写的透彻的.在实际应用中也只能依葫芦画瓢,只知其然不知其所以然,甚是郁闷!闲来无事,便将搜集网络的相关内容整理一下,以便加深自己的理解 理论概述:.h中一般 ...

  4. 详细回复某个CSDN网友，对我的文章和技术实力以及CSDN的吐槽

    貌似被大学生鄙视了,我也是醉了,现在的大学生水平和信心,都这么高了~ 看来,我得加把劲了~ o(︶︿︶)o 电子商务系列文章,是我闲来无事,分享自己的一些业余实践经验的文章.其中关于数据库设计的这一篇 ...

  5. Filter,Listener(转)

    一.Filter的功能filter功能,它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个reques ...

  6. 【32.26%】【codeforces 620C】Pearls in a Row

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. Android Studio运行main方法

    这样想做一些测试就很简单了 实现步骤如下: 1.当前项目右键->new->Module->Java Library 2.修改你创建javaLib的build.gradle文件 改为( ...

  8. java基础篇---文件上传(组件)

    转载自:http://www.cnblogs.com/oumyye/p/4234969.html 文件上传几乎是所有网站都具有的功能,用户可以将文件上传到服务器的指定文件夹中,也可以保存在数据库中,本 ...

  9. Qt保存界面配置到注册表

    //需要使用QSetting #include<QSettings> 声明函数 protected: void closeEvent(QCloseEvent *event); privat ...

  10. lua转换etcd应答

    local function decodeNodes(nodes) local table = {} for _, value in ipairs(nodes) do if value.nodes t ...