一个基于jQ的城市选择器,核心内容来自网上的一个哥们儿(具体不详),我在他的基础上做了优化,美化了下UI。 瞧,这就是我做的工作,所以我是改善者的角色,而非原作者。
预览地址: http://aqiongbei.github.io/city_picker/
使用方法保持原有的样子,非常简单.
<div class="city-picker"></div>
由于该城市选择器基于jQ请确保已经引入jQ
此外,需要引入样式文件choose_city.css
<link rel="stylesheet" href="./css/choose_city.css">
需要引入样式文件choose_city.js
以及城市列表的配置文件city_list
<script src="./js/choose_city.js"></script>
<script src="./js/city_list.js"></script>
其中城市列表配置文件格式包含两个变量,一个表示热门城市
,一个表示所有城市列表
:
// 热门城市
var hotCities = [{
"name": "北京",
"code": "00110001"
}, {
"name": "上海",
"code": "00310000"
}];
// 所有城市列表
var cities = {
"B": [{
"name": "北京",
"code": "00110001"
},
{
"name": "包头",
"code": "00150000"
},
{
"name": "保定",
"code": "00130005"
}
],
"C": [{
"name": "成都",
"code": "00510001"
},
{
"name": "重庆",
"code": "00500000"
}
],}
$(".city-picker").CityPicker({hotCities: hotCities, cities: cities});