//author:guan
//2015-05-25
//省市联动
//实用说明,页面引用如下js
//<script src="../js/jquery-1.6.3.min.js"></script>
//<script src="js/ProvinceDropDown.js"></script>
//页面元素
//<select id="Province"></select>
//<select id="City"></select> $(function () {
//初始化下拉框值
InitDropDown("Province", "City");
})
var Dropdowndata = [{ "ParentName": "宁夏", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "银川", "ChildrenCode": "11" }] }, { "ParentName": "山东", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "济南", "ChildrenCode": "11" }, { "ChildrenName": "青岛", "ChildrenCode": "12" }, { "ChildrenName": "潍坊", "ChildrenCode": "13" }] }, { "ParentName": "甘肃", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "兰州", "ChildrenCode": "11" }] }, { "ParentName": "天津", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "天津", "ChildrenCode": "11" }] }, { "ParentName": "湖南", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "长沙", "ChildrenCode": "11" }] }, { "ParentName": "湖北", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "武汉", "ChildrenCode": "11" }, { "ChildrenName": "襄阳", "ChildrenCode": "12" }] }, { "ParentName": "云南", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "昆明", "ChildrenCode": "11" }] }, { "ParentName": "广东", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "广州", "ChildrenCode": "11" }, { "ChildrenName": "深圳", "ChildrenCode": "12" }, { "ChildrenName": "佛山", "ChildrenCode": "13" }, { "ChildrenName": "东莞", "ChildrenCode": "14" }, { "ChildrenName": "中山", "ChildrenCode": "15" }] }, { "ParentName": "浙江", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "杭州", "ChildrenCode": "11" }, { "ChildrenName": "宁波", "ChildrenCode": "12" }, { "ChildrenName": "嘉兴", "ChildrenCode": "13" }, { "ChildrenName": "绍兴", "ChildrenCode": "14" }, { "ChildrenName": "义乌", "ChildrenCode": "15" }, { "ChildrenName": "温州", "ChildrenCode": "16" }, { "ChildrenName": "台州", "ChildrenCode": "17" }] }, { "ParentName": "江西", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "南昌", "ChildrenCode": "11" }] }, { "ParentName": "新疆", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "乌鲁木齐", "ChildrenCode": "11" }] }, { "ParentName": "北京", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "北京", "ChildrenCode": "11" }] }, { "ParentName": "河北", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "唐山", "ChildrenCode": "11" }, { "ChildrenName": "保定", "ChildrenCode": "12" }, { "ChildrenName": "邯郸", "ChildrenCode": "13" }] }, { "ParentName": "贵州", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "贵阳", "ChildrenCode": "11" }] }, { "ParentName": "四川", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "成都", "ChildrenCode": "11" }, { "ChildrenName": "南充", "ChildrenCode": "12" }, { "ChildrenName": "泸州", "ChildrenCode": "13" }, { "ChildrenName": "宜宾", "ChildrenCode": "14" }, { "ChildrenName": "绵阳", "ChildrenCode": "15" }] }, { "ParentName": "吉林", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "长春", "ChildrenCode": "11" }] }, { "ParentName": "安徽", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "合肥", "ChildrenCode": "11" }, { "ChildrenName": "芜湖", "ChildrenCode": "12" }] }, { "ParentName": "黑龙江", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "哈尔滨", "ChildrenCode": "11" }] }, { "ParentName": "辽宁", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "沈阳", "ChildrenCode": "11" }, { "ChildrenName": "大连", "ChildrenCode": "12" }] }, { "ParentName": "山西", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "山西", "ChildrenCode": "11" }] }, { "ParentName": "河南", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "郑州", "ChildrenCode": "11" }] }, { "ParentName": "福建", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "福州", "ChildrenCode": "11" }, { "ChildrenName": "厦门", "ChildrenCode": "12" }, { "ChildrenName": "泉州", "ChildrenCode": "13" }] }, { "ParentName": "重庆", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "重庆", "ChildrenCode": "11" }] }, { "ParentName": "江苏", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "南京", "ChildrenCode": "11" }, { "ChildrenName": "苏州", "ChildrenCode": "12" }, { "ChildrenName": "无锡", "ChildrenCode": "13" }, { "ChildrenName": "常州", "ChildrenCode": "14" }, { "ChildrenName": "南通", "ChildrenCode": "15" }, { "ChildrenName": "扬州", "ChildrenCode": "16" }, { "ChildrenName": "盐城", "ChildrenCode": "17" }] }, { "ParentName": "陕西", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "西安", "ChildrenCode": "11" }, { "ChildrenName": "榆林", "ChildrenCode": "12" }] }, { "ParentName": "广西", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "南宁", "ChildrenCode": "11" }] }, { "ParentName": "海南", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "海口", "ChildrenCode": "11" }] }, { "ParentName": "上海", "ParentCode": "1", "ChildrenNodes": [{ "ChildrenName": "上海", "ChildrenCode": "11" }] }]; function InitDropDown(province, city) {
var _province = $("#" + province);
//初始化清空,为其添加请选择默认选项
_province.empty().append($("<option>").text("请选择").val("-1")); var _city = $("#" + city);
_city.empty().append($("<option>").text("请选择").val("-1"));
//循环读取数组的json一级下拉值
for (var i = 0; i < Dropdowndata.length; i++) {
var option = $("<option>").text(Dropdowndata[i].ParentName).val(Dropdowndata[i].ParentCode).attr("pos", i);
_province.append(option);
}
$(_province).change(function () {
_city.empty().append($("<option>").text("请选择").val("-1"));
//根据数组下标从数据取出json数据
var citys = Dropdowndata[$(this).find("option:selected").attr("pos")].ChildrenNodes;
for (var i = 0; i < citys.length; i++) {
var option = $("<option>").text(citys[i].ChildrenName).val(citys[i].ChildrenCode);
_city.append(option);
}
})
} 页面元素如下
  <select id="Province"></select>
<select id="City"></select>

jquery省市联动,根据公司需求而写的更多相关文章

  1. jQuery省市联动(XML/JSON)

    准备: 导包 在src下导入c3p0-config.xml 导入JDBCUtil 创建数据库 新建js文件夹导入jQuery配置文件 NO01:创建city.jsp页面 <%@ page lan ...

  2. jQuery省市联动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. jquery插件-省市联动

        由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个.     首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...

  4. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

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

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

  6. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  7. Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  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. git常用功能

  2. 【思路】-分页-双top分页算法的原理

    描述:实现分页的一种算法 大致过程:访客访问不同的分页,为这个当前页生成动态的查询SQL,然后送到数据库中执行 输入:总条数,每页多少条,第几页,查询的SQL,排序的字段 注意:传入的排序字段需要构成 ...

  3. 艺萌文件上传下载及自动更新系统(基于networkComms开源TCP通信框架)

    1.艺萌文件上传下载及自动更新系统,基于Winform技术,采用CS架构,开发工具为vs2010,.net2.0版本(可以很容易升级为3.5和4.0版本)开发语言c#. 本系统主要帮助客户学习基于TC ...

  4. P53 T3

    为方便旅客,某航空公司拟开发一个机票预定系统.旅行社把预定机票的旅客信息(姓名.性别.工作单位.身份证号码.旅行时间.旅行目的地等)输入进入该系统,系统为旅客安排航班,印出取票通知和账单,旅客在飞机起 ...

  5. 2018. The Debut Album

    http://acm.timus.ru/problem.aspx?space=1&num=2018 真心爱过,怎么能彻底忘掉 题目大意: 长度为n的串,由1和2组成,连续的1不能超过a个,连续 ...

  6. 高性能javascript(记录三)

    DOM(文档对象模型)是一个独立的语言,用于操作XML和HTML文档的程序接口(API).在游览器中,主要用来与HTML文档打交道,同样也用在Web程序中获取XML文档,并使用DOM API用来访问文 ...

  7. 在集群上运行caffe程序时如何避免Out of Memory

    不少同学抱怨,在集群的GPU节点上运行caffe程序时,经常出现"Out of Memory"的情况.实际上,如果我们在提交caffe程序到某个GPU节点的同时,指定该节点某个比较 ...

  8. #Deep Learning回顾#之LeNet、AlexNet、GoogLeNet、VGG、ResNet

    CNN的发展史 上一篇回顾讲的是2006年Hinton他们的Science Paper,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服.当时有流传的段 ...

  9. Redis 3.0.0 集群部署

    简述: 1.0.1:redis cluster的现状 目前redis支持的cluster特性 1):节点自动发现 2):slave->master 选举,集群容错 3):Hot reshardi ...

  10. Web——在淘宝搜索到看到商品

    [摘自]http://blog.renren.com/blog/254459622/799372165 浏览器首先查询DNS服务器,将www.taobao.com转换成ip地址.负载均衡的第一步,将你 ...