0、准备工作
下载需要加载的文件jquery相关文件
我这里加载的是如下文件,可根据自己情况选择jquery版本
jquery.mobile-1.4.5.min.css
jquery.min.js
jquery.mobile-1.4.5.min.js

1、pro_city.js// JavaScript Document
/**
* 省市json数据,同步淘宝2016年3月28日的省市数据
*/
var provinceAndCityArray = [{ name: "北京", cities: ["北京"] },
{ name: "天津", cities: ["天津"] },
{ name: "上海", cities: ["上海"] },
{ name: "重庆", cities: ["重庆"] },
{ name: "河北", cities: ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水","其他"] },
{ name: "山西", cities: ["太原", "大同", "长治", "晋中", "晋城", "忻州", "阳泉", "朔州", "运城", "临汾", "吕梁", "其他"] },
{ name: "内蒙古", cities: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "兴安", "锡盟", "阿拉善", "其他"] },
{ name: "辽宁", cities: ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛","其他"] },
{ name: "吉林", cities: ["长春", "吉林", "四平", "辽源", "通化", "延边", "白城", "白山", "松原", "其他"] },
{ name: "黑龙江", cities: ["哈尔滨", "齐齐哈尔", "鸡西", "双鸭山", "大庆", "伊春", "七台河", "牡丹江", "鹤岗", "佳木斯", "黑河", "绥化", "大兴安岭", "其他"] },

{ name: "江苏", cities: ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "其他"] },
{ name: "浙江", cities: ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州","其他"] },
{ name: "安徽", cities: ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "淮北", "铜陵", "滁州", "阜阳", "宿州", "六安", "毫州", "池州", "宣城", "安庆","其他"] },
{ name: "福建", cities: ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德","其他"] },
{ name: "江西", cities: ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州", "抚州","其他"] },
{ name: "山东", cities: ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "莱芜", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城", "滨州","其他"] },
{ name: "河南", cities: ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "鹤壁", "许昌", "漯河", "南阳", "信阳", "周口", "驻马店", "新乡", "焦作", "济源", "三门峡", "商丘","其他"] },
{ name: "湖北", cities: ["武汉", "襄阳", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "仙桃", "潜江", "天门", "神农架", "鄂州", "随州", "荆门", "咸宁","其他"] },
{ name: "湖南", cities: ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州","其他"] },
{ name: "广东", cities: ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "肇庆", "清远","其他"] },
{ name: "广西", cities: ["南宁", "桂林", "柳州", "梧州", "北海", "防城港", "钦州", "百色", "来宾", "贵港", "玉林", "贺州", "河池", "崇左", "其他"] },
{ name: "海南", cities: ["海口", "三亚", "三沙", "五指山", "琼海", "儋州", "文昌", "万宁", "东方", "定安县", "屯昌县", "澄迈县", "临高县", "白沙县", "昌江县", "乐东县", "陵水县", "保亭县", "琼中县", "西沙群岛", "南沙群岛", "中沙群岛", "其他"] },
{ name: "四川", cities: ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "攀枝花", "泸州", "广元", "眉山", "广安", "雅安", "资阳", "阿坝", "甘孜", "凉山", "其他"] },
{ name: "贵州", cities: ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "黔西南", "毕节", "黔东南", "黔南", "其他"] },
{ name: "云南", cities: ["昆明", "曲靖", "丽江", "昭通", "玉溪", "保山", "普洱", "临沧", "文山", "红河", "楚雄", "西双版纳", "大理", "德宏", "怒江", "迪庆", "其他"] },
{ name: "西藏", cities: ["拉萨", "林芝", "日喀则", "昌都", "山南", "那曲", "阿里", "其他"] },
{ name: "陕西", cities: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛", "其他"] },
{ name: "甘肃", cities: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "张掖", "平凉", "酒泉", "庆阳", "定西", "陇南", "临夏", "甘南", "其他"] },
{ name: "青海", cities: ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树","其他"] },
{ name: "宁夏", cities: ["银川", "石嘴山", "吴忠", "固原", "中卫", "其他"] },
{ name: "新疆", cities: ["乌鲁木齐", "吐鲁番", "哈密", "喀什", "巴音郭楞", "阿克苏", "克孜勒苏", "和田", "昌吉", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉尔", "图木舒克", "五家渠", "克拉玛依", "博尔塔拉","其他"] },
{ name: "台湾", cities: ["台北", "高雄", "台南", "台中", "台北", "金门", "南投", "基隆", "新竹", "桃园", "苗栗", "彰化", "嘉义", "云林", "屏东", "台东", "花莲", "澎湖", "连江", "其他"] },
{ name: "香港", cities: ["香港岛", "九龙", "新界", "其他"] },
{ name: "澳门", cities: ["澳门半岛", "离岛", "其他"]},
{ name: "海外", cities: ["海外"]}]; 2、create_pro_city.js// JavaScript Document
$(document).on("pageinit", function() {
// 填充省下拉列表
var provincesOptionHtml = "";
var provinces = [];
for(var el in provinceAndCityArray) {
provinces.push(provinceAndCityArray[el].name);
provincesOptionHtml += "<option value=" + provinceAndCityArray[el].name + ">" + provinceAndCityArray[el].name + "</option>";
}
$("#selectProvince").append(provincesOptionHtml);

// 填充城市下拉列表
$("#selectProvince").bind("change", function() {
var selectedProvinceVal = $("#selectProvince :selected").val();
var selectedProvince=-1;
switch (selectedProvinceVal)
{
case '北京': selectedProvince=0; break;
case '天津': selectedProvince=1; break;
case '上海': selectedProvince=2; break;
case '重庆': selectedProvince=3; break;
case '河北': selectedProvince=4; break;
case '山西': selectedProvince=5; break;
case '内蒙古': selectedProvince=6; break;
case '辽宁': selectedProvince=7; break;
case '吉林': selectedProvince=8; break;
case '黑龙江': selectedProvince=9; break;

case '江苏': selectedProvince=10; break;
case '浙江': selectedProvince=11; break;
case '安徽': selectedProvince=12; break;
case '福建': selectedProvince=13; break;
case '江西': selectedProvince=14; break;
case '山东': selectedProvince=15; break;
case '河南': selectedProvince=16; break;
case '湖北': selectedProvince=17; break;
case '湖南': selectedProvince=18; break;
case '广东': selectedProvince=19; break;

case '广西': selectedProvince=20; break;
case '海南': selectedProvince=21; break;
case '四川': selectedProvince=22; break;
case '贵州': selectedProvince=23; break;
case '云南': selectedProvince=24; break;
case '西藏': selectedProvince=25; break;
case '陕西': selectedProvince=26; break;
case '甘肃': selectedProvince=27; break;
case '青海': selectedProvince=28; break;
case '宁夏': selectedProvince=29; break;

case '新疆': selectedProvince=30; break;
case '台湾': selectedProvince=31; break;
case '香港': selectedProvince=32; break;
case '澳门': selectedProvince=33; break;
case '海外': selectedProvince=34; break;
default:selectedProvince=-1;
}
if(selectedProvince != -1) {
var citiesOptionHtml = "";
var cities = [];
cities = provinceAndCityArray[selectedProvince].cities;
for(var elCity in cities) {
citiesOptionHtml += "<option value=" + cities[elCity] + ">" + cities[elCity] + "</option>";
}
// 清空之前的城市列表
$("#selectCity option[value!=-1]").remove();
$("#selectCity option[value=-1]").attr("selected", true);
$("#selectCity").append(citiesOptionHtml);
$("#selectCity").selectmenu("refresh");
}
});
}); 3、Test_index.html显示页<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="__ROOT__/jqmobile/css/jquery.mobile-1.4.5.min.css" />
<script src="__ROOT__/jqmobile/js/jquery.min.js"></script>
<script src="__ROOT__/jqmobile/js/jquery.mobile-1.4.5.min.js"></script>
<script src="__ROOT__/Public/js/pro_city.js"></script>
<script src="__ROOT__/Public/js/create_pro_city.js"></script>
</head>
<body>
<form action="{:U('Test/selected')}" enctype="multipart/form-data" method="get" data-ajax="false">
<table width="100%" cellpadding="10">
<tr>
<td align="center">请选择省份</td>
<td align="left"><select id="selectProvince" name="province">
<option value="-1">请选择省份</option>
</select></td>
</tr>
<tr>
<td align="center">请选择城市</td>
<td align="left"><select id="selectCity" name="city">
<option value="-1">请选择城市</option>
</select></td>
</tr>
</table>
<input type="submit" value="提交">
</form>
</body>
</html> 4、TestAction.class.php
这里显示获取到的省市名称值,用于验证提交省市名称是否成功public function selected(){
$province=I('province');
$city=I('city');
dump($province);
dump($city);
}备注:JS部分参考了iteye的这篇博文http://lixuanbin.iteye.com/blog/1997929
修改:
1、对JS的省市数据对比2016年3月27日淘宝购物时显示的地区数据进行了更新;
2、表单提交的value值由数字改为省市中文名称。

最佳答案

评论() 相关

收藏

赞

zuixian113

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。