<!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. 【34.25%】【BZOJ 2648】SJY摆棋子

    Time Limit: 20 Sec  Memory Limit: 128 MB Submit: 2718  Solved: 931 [Submit][Status][Discuss] Descrip ...

  2. 【30.49%】【codeforces 569A】Music

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

  3. [React Unit Testing] React unit testing demo

    import React from 'react' const Release = React.createClass({ render() { const { title, artist, outO ...

  4. 【39.29%】【codeforces 552E】Vanya and Brackets

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  5. [Git] Use git add --patch for better commit history and mitigating bugs

    Let's split our changes into separate commits. We'll be able to check over our changes before stagin ...

  6. 注册表 Run、RunOnce 浅析

    绝大多数使用过 Windows 操作系统的用户都不会对注册表的 Run.RunOnce 键值感到陌生,但你真的了解所有这些键值的细节吗?让我们具体说来. 本文在Win2000,WinXp.Vista. ...

  7. SYSTEMTIME 与 time_t 之间的转换，计算2个SYSTEMTIME的时间差

    time_t systemtime_to_time_t(const SYSTEMTIME& st) { struct tm gm = {st.wSecond, st.wMinute, st.w ...

  8. Android的NDK开发(5)————Android JNI层实现文件的read、write与seek操作

    1. 在Android的Java层实现文件的读写操作是非常简单的,可以参看之前写的博文:http://blog.csdn.net/conowen/article/details/7296121 在JN ...

  9. STS开发环境搭建与配置

    STS开发环境搭建与配置 (2012-04-11 07:24:51) 转载▼ 1.   环境准备 安装JDK.MAVEN 1.1.        下载 下载sprdfingsource-tool-su ...

  10. CentOS查看系统信息和资源使用已经升级系统的命令

    1.查看系统版本: 1)cat /etc/redhat-release   2)uname -a 2.查看资源使用: top 3.升级所有包同时也升级软件和系统内核: yum -y update