省市联动Demo
<!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的更多相关文章
- 2016 -1 - 3 省市联动demo
#import "ViewController.h" #import "CZProvinces.h" @interface ViewController ()& ...
- 省市联动_简单的Demo,适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery省市联动,根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
- AJAX案例四:省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Dynamic CRM 2013学习笔记(八)过滤查找控件 (类似省市联动)
我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
随机推荐
- VMware搭建12.0搭建Mac OS10.11详细过程
1.软件准备 1.1VMware12.0 1.2VMware增强包 1.3Mac OS10.11 cdr(相当于dmg) 1.4securable.exe 2.软件破解 2.1VMware输入序列号破 ...
- Spring中注解事务方面的问题
我们可以在spring的配置文件beans.xml中对事务进行注解配置,这样在相应的类中就不用对事务进行管事,对于某个类,想单独交给spring来管理,那么就在相应的类上加入@Transactiona ...
- UVA12219
//by Rujia Liu /* 字符串的对比是缓慢的. 鉴于这道题最多只有四个小写字母, 也就是最多26*4种情况, 我们完全可以用整数来代替字符串. 一种比较简单的做法是把字符串看成一个四位的2 ...
- LeetCode: Word Break II [140]
[题目] Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where ...
- Codeforces Gym 100513I I. Sale in GameStore 暴力
I. Sale in GameStore Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100513/p ...
- uoj #31. 【UR #2】猪猪侠再战括号序列 贪心
#31. [UR #2]猪猪侠再战括号序列 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/31 Descript ...
- HDU 4593 H - Robot 水题
H - RobotTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.act ...
- 解决mac的日历问题:服务器响应一个错误
出了一个问题好久,平时也不用这个同步不靠谱的日历.今晚花点时间解决了下. 参考Apple 官网日历的问题解答. 当出现如下情况时: 退出日历和提醒事项. 从 Apple () 菜单中选取“系统偏好设 ...
- Android自定义radiobutton(文字靠左,选框靠右)
<RadioButton android:id="@+id/rb_never" android:layout_width="fill_parent" an ...
- GNU C中x++是原子操作吗?
http://blog.csdn.net/liuaigui/article/details/4141563