<!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. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  2. 新版Sublime text3注册码被移除的解决办法

    Sublime Text是风靡世界的文本编辑器,支持多种编程语言,启动时间短,打开文件速度快,插件丰富,让很多程序员爱不释手.但是,对于未注册的Sublime Text, 经常在保存的时候会弹出一个烦 ...

  3. XMPP之ios即时通讯客户端开发－配置XMPP基本信息之工程代码(五)

    登录功能完成以后包含以下代码文件: AppDelegate.h AppDelegate.m LoginViewController.h LoginViewController.m LoginUser. ...

  4. erlang版本的protobuf

    这两天看了google protocol buffers的文档,protobuf非常不错,解决了一直以来遇到的消息版本不同的问题,对项目中的开发非常有帮助. 最近在学习erlang,官方只有java. ...

  5. [GeekBand] 设计模式之观察者模式学习笔记

    本文参考文献::GeekBand课堂内容,授课老师:李建忠 :网络资料: http://blog.csdn.net/hguisu/article/details/7556625 本文仅作为自己的学习笔 ...

  6. java-synchronized原理

    介绍 synchronized是一种独占式的重量级锁,在运行到同步方法或者同步代码块的时候,让程序的运行级别由用户态切换到内核态,把所有的线程挂起,通过操作系统的指令,去调度线程.这样会频繁出现程序运 ...

  7. 网络编程C#

    C#网络程序设计(1)网络编程常识与C#常用特性     网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的 ...

  8. MVVM、MVVMLight、MVVMLight Toolkit之我见

    原文:MVVM.MVVMLight.MVVMLight Toolkit之我见 我想,现在已经有不少朋友在项目中使用了MVVMLight了吧,如果你正在做WPF,Silverlight,Windows ...

  9. 还是Qt 通过stylesheet或者palette设置背景色的问题

    关于Qt,设置一个widget的背景色后,希望子对象不受影响. 很久以前在QtForum上问过一个问题:http://www.qtforum.org/post/94103/setting-backgr ...

  10. 【23.24%】【codeforces 629C】Famil Door and Brackets

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