<!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. HTML代码简写法：Emmet和Haml（转）

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...

  2. 三列自适应布局的实现方式(兼容IE6+)

    1.绝对定位方式 <div class="nm-3-lr"> <div class="aside-f"> <p>侧边栏1固定 ...

  3. [Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

    What about the situation in which we aren’t specifying the number of columns or rows to be repeated? ...

  4. [Angular] Updating and resetting FormGroups and FormControls

    If you want to reset or just update field value, you can do: reset: reset({key: value, k2:v2}); upda ...

  5. 颜色转换：＃hhhfff－>UIColor （MHHexColoring）

    MHHexColoring为开发者快速获取想要的十六进制颜色(Hex Color) 查找16进制色码的网站:http://www.color-hex.com // 版权属于原作者 MHHexColor ...

  6. sqoop 1.4.7 安装配置/连接测试

    环境: hadoop2.7.7 mysql 8 zk 3.4.10 hive 3 1.上传并解压tar包后进入conf目录 拷贝sqoop-env-template.sh并重命名为sqoop-env. ...

  7. hadoop 3.x 启动过程中 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).

    出现这种状况是因为当前账号没有配置ssh免密登录 进入到以下目录,查看是否生成过秘钥对,如果有的话直接ssh-copy-id 主机名 没有的话执行ssh-keygen -t rsa后再重新执行ssh- ...

  8. C#MVC中创建多模块web应用程序

    当一个应用程序有越来越多的子模块后,应用程序将变得越来越大,复杂度也越来越高,应用程序也越来越难维护.如果把每个子模块,独立分成不同的web应用程序,则这个项目将易于维护.关于这个的好处,我也描述得不 ...

  9. MATLAB使用入门

    作者:朱金灿 来源:http://blog.csdn.net/clever101 初步学习了MATLAB的使用,发现MATLAB是一个很好的算法仿真工具.MATLAB也是一门语言,是否会使用这门语言编 ...

  10. 【29.41%】【codeforces 724D】Dense Subsequence

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