一、需求：

提供省、市下拉列表，当用户选择省一级下拉列表项后，市下拉列表的各个选项自动变为该省对应的城市列表。

二、效果：

三、实现：

1.省市json数据，来自：

http://www.cnblogs.com/jinzhao/archive/2012/04/01/2428142.html

  1. /**
  2. * 省市json数据
  3. */
  4. var provinceAndCityArray = [{ name: "北京", cities: ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] },
  5. { name: "天津", cities: ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] },
  6. { name: "河北", cities: ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] },
  7. { name: "山西", cities: ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] },
  8. { name: "内蒙古", cities: ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] },
  9. { name: "辽宁", cities: ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },
  10. { name: "吉林", cities: ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] },
  11. { name: "黑龙江", cities: ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] },
  12. { name: "上海", cities: ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] },
  13. { name: "江苏", cities: ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] },
  14. { name: "浙江", cities: ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] },
  15. { name: "安徽", cities: ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] },
  16. { name: "福建", cities: ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] },
  17. { name: "江西", cities: ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] },
  18. { name: "山东", cities: ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] },
  19. { name: "河南", cities: ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] },
  20. { name: "湖北", cities: ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"] },
  21. { name: "湖南", cities: ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] },
  22. { name: "广东", cities: ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] },
  23. { name: "广西", cities: ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] },
  24. { name: "海南", cities: ["海口", "三亚"] },
  25. { name: "重庆", cities: ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] },
  26. { name: "四川", cities: ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] },
  27. { name: "贵州", cities: ["贵阳", "遵义", "安顺", "黔西南", "都匀"] },
  28. { name: "云南", cities: ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] },
  29. { name: "西藏", cities: ["拉萨", "林芝", "日喀则", "昌都"] },
  30. { name: "陕西", cities: ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] },
  31. { name: "甘肃", cities: ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] },
  32. { name: "青海", cities: ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] },
  33. { name: "宁夏", cities: ["银川", "吴忠"] },
  34. { name: "新疆", cities: ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] },
  35. { name: "香港", cities: ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] },
  36. { name: "澳门", cities: ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]}];

2.html页面，主要就是放置了两个select，使用了jQuery Mobile：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet"
  7. href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  8. <title>meetwe</title>
  9. </head>
  10. <body>
  11. <table width="100%" cellpadding="10">
  12. <tr>
  13. <td align="center">请选择省份</td>
  14. <td align="left"><select id="selectProvince">
  15. <option value="-1">请选择省份</option>
  16. </select></td>
  17. </tr>
  18. <tr>
  19. <td align="center">请选择城市</td>
  20. <td align="left"><select id="selectCity">
  21. <option value="-1">请选择城市</option>
  22. </select></td>
  23. </tr>
  24. </table>
  25. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  26. <script  src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  27. <script src="../js/province-and-city-json.js"></script>
  28. <script src="../js/create-province-and-city.js"></script>
  29. </body>
  30. </html>

3.js代码实现填充下拉列表选项，并响应省一级下拉列表选中项改变事件更改市级下拉列表取值：

  1. $(document).on("pageinit", function() {
  2. // 填充省下拉列表
  3. var provincesOptionHtml = "";
  4. var provinces = [];
  5. for(var el in provinceAndCityArray) {
  6. provinces.push(provinceAndCityArray[el].name);
  7. provincesOptionHtml += "<option value=" + el + ">" + provinceAndCityArray[el].name + "</option>";
  8. }
  9. $("#selectProvince").append(provincesOptionHtml);
  10. // 填充城市下拉列表
  11. $("#selectProvince").bind("change", function() {
  12. var selectedProvince = $("#selectProvince :selected").val();
  13. if(selectedProvince != -1) {
  14. var citiesOptionHtml = "";
  15. var cities = [];
  16. cities = provinceAndCityArray[selectedProvince].cities;
  17. for(var elCity in cities) {
  18. citiesOptionHtml += "<option value=" + elCity + ">" + cities[elCity] + "</option>";
  19. }
  20. // 清空之前的城市列表
  21. $("#selectCity option[value!=-1]").remove();
  22. $("#selectCity option[value=-1]").attr("selected", true);
  23. $("#selectCity").append(citiesOptionHtml);
  24. $("#selectCity").selectmenu("refresh");
  25. }
  26. });
  27. });

jQuery + jQuery Mobile 实现省市二级下拉列表页面的更多相关文章

  1. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  2. 用jquery+Asp.Net实现省市二级联动

    页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax. ...

  3. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  4. SharePoint之使用Jquery Mobile定制自己的手机页面

    最近一直很忙,既要创业,又要工作,还有弄弄自己的小项目(已暂停,http://www.codelove1314.com/,如果你不愿意浪费你的业余时间,喜欢弄点小东西,请联系我),所以虽然有很多东西分 ...

  5. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  6. 基于jQuery+JSON的省市县 二级 三级 联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...

  7. 用jquery实现文章自动生成二级目录（续）

    前文:用jquery实现文章自动生成二级目录. 使用方法的补充 我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题 在我把我的js放到自己的博客园上运行之后发 ...

  8. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  9. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

  1. Axis，axis2，Xfire以及cxf对比

    http://ws.apache.org/axis/ http://axis.apache.org/axis2/java/core/ http://xfire.codehaus.org/ http:/ ...

  2. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  3. Asp.Net 自定义控件实现图片的上传，浏览，删除功能

    4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的 ...

  4. 链接服务器"(null)"的 OLE DB 访问接口 "Microsoft.Jet.OLEDB.4.0" 返回了消息 "未指定的错误"。[手稿]

    消息 7302,级别 16,状态 1,第 1 行 无法创建链接服务器 "(null)" 的 OLE DB 访问接口 "Microsoft.JET.OLEDB.4.0&qu ...

  5. 前端架构：Angular与requirejs集成实践

    这几天angular与requirejs.browserify的集成弄的博主头好晕,今天终于成功集成了requirejs,现写些心得体会在这里. 核心思想:angular加载时有一定的顺序,必须依次加 ...

  6. 使用ncc分析代码

    1 ncc是一个编译器, 用于输出程序的一些调用信息等, 可以查看函数调用关系, 支持函数指针, 查看数据结构和代码. 可以用来分析和理解代码. “" ... with ncc, in le ...

  7. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  8. SQL SERVER 2008 R2 SP3 发布

    今晚上刚发现,微软很低调啊 下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=44271 整合SP3的Express系列版本还没 ...

  9. 【工作备忘】suricata

    因为工作遇到的困难,我向suricata的某个作者发送了邮件. On Wed, Sep 11, 2013 at 8:22 AM, likeyi <929812468@qq.com> wro ...

  10. Tilera 服务器上hadoop单机版测试

    ---恢复内容开始--- 本篇博客用来记录在单个Tilera服务器上安装hadoop并且测试的经历,参阅了大多数博客. 1.Tilera服务器介绍 本Tilera服务器配备9核CPU,共挂在6块硬盘, ...