<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="scripts/jquery-1.7.1.js"></script>
    <script>
        //$.each(obj,fun(i,n))
        //如果obj是数组，则i是索引，n是元素
        //如果obj是对象或键值对，i是键，n是值

        //定义省市数据，键值对集合
        var datas = {
            "北京": ["朝阳", "海淀", "昌平", "丰台"],
            "山东": ["青岛", "济南", "烟台"],
            "山西": ["大同", "太原", "运城", "长治"],
            "河南": ["洛阳", "开封", "郑州", "驻马店"],
            "河北": ["石家庄", "张家口", "保定"]
        };
        $(function () {
            //创建省的select
            var select = $('<select id="selectProvince"></select>');
            //追加到body中
            select.appendTo('body');
            //遍历集合
            $.each(datas, function (key, value) {
                $('<option>' + key + '</option>').appendTo(select);
            });

            //创建市的select
            var selectCity = $('<select id="selectCity"></select>');
            selectCity.appendTo('body');

            //获取选中的省信息
            var pro = $('#selectProvince').val();
            //将省名称作为键到集合中获取值
            var citys = datas[pro];
            //遍历市的数组
            $.each(citys, function (index,item) {
                $('<option>' + item + '</option>').appendTo(selectCity);
            })
            //最后写change事件：为省的select绑定change事件
            select.change(function () {
                var citys = datas[$(this).val()];
                //删除市的原有option
                selectCity.empty();
                $.each(citys, function (index, item) {
                    $('<option>' + item + '</option>').appendTo(selectCity);
                })
            })
        })
    </script>
</head>
<body>
    
</body>
</html>

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

  1. 2016 -1 - 3 省市联动demo

    #import "ViewController.h" #import "CZProvinces.h" @interface ViewController ()& ...

  2. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

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

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

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

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

  5. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  7. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）

    我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...

  9. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

随机推荐

  1. picture to string

    图片转化为字符原理: 一张m*n大小的图片,实际上可以看成是一个m*n的矩阵.矩阵的每一个元素就是一个Color值,不同的Color值,用不同的Ascii可以在屏幕上打印显示的字符来代替,于是可以得到 ...

  2. labview多个并行循环同时退出

    labview中停止并行的循环 问题: 在labview中我如何停止两个并行的循环?我使用一个局部变量,但是当我停止程序执行后,第二次不能运行程序.我该如何解决这个问题呢? 解答:  你使用局部变量来 ...

  3. CodeForces 706C Hard problem (水DP)

    题意:对于给定的n个字符串,可以花费a[i]  将其倒序,问是否可以将其排成从大到小的字典序,且花费最小是多少. 析:很明显的水DP,如果不是水DP,我也不会做.... 这个就要二维,d[2][max ...

  4. radio select的 option使用

    1  radio的使用 <td id="sex">性别:              <input type="radio" name=&quo ...

  5. Linux学习笔记----（2）

    闲着无事,就敲起了Linux 命令,熟悉一下.记得昨天在书上看到了 find命令的用法,觉得挺神奇的. 其中 find 能够确定文件的查找深度 于是 敲了如下命令: #mkdir father #to ...

  6. contiki Makefile.include 四个关注点<contiki学习之二>

    Contiki Makefile.include 笔记 约定:  makefile 包括Makefile.Makefile.xxx,并不单指Makefile 不对makefile的语法进行分析,仅仅关 ...

  7. PostgreSQL的 initdb 源代码分析之二

    继续分析 下面这一段,当 initdb --version 或者  initdb --help 才有意义. ) { ], || strcmp(argv[], ) { usage(progname); ...

  8. [IOS]自定义长触屏事件

    写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecogn ...

  9. 也谈OpenFlow, SDN, NFV

    Copyright (2014) 郭龙仓. All Rights Reserved. OpenFlow 传统的网络环境中,仅仅有路由器/交换机之间的接口/协议是标准化的,可是在网络设备内部,数据平面和 ...

  10. C#_uploadify_mvc_version

    jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. ...