简单好用的二级区域选择控件

效果图如下：


首先需要jQuery v2.1.3的支持，导入包jquery-2.1.3.min.js

其次，区域中的省份，城市是设定好的值吧，这里就需要导入数据包，代码如下:

var cityData={hot:[{"pid":1,"pname":"北京","id":2,"name":"北京市"},{"pid":21,"pname":"上海","id":22,"name":"上海市"},{"pid":423,"pname":"广东","id":424,"name":"广州市"},{"pid":423,"pname":"广东","id":524,"name":"深圳市"},{"pid":1643,"pname":"江苏","id":1644,"name":"南京市"},{"pid":42,"pname":"天津","id":43,"name":"天津市"}],province:[{id:"1",name:"北京",city:[{id:"2",name:"北京市"}]},{id:"21",name:"上海",city:[{id:"22",name:"上海市"}]},{id:"42",name:"天津",city:[{id:"43",name:"天津市"}]},{id:"62",name:"重庆",city:[{id:"63",name:"重庆市"}]},{id:"104",name:"安徽",city:[{id:"105",name:"合肥市"},{id:"113",name:"安庆市"},{id:"125",name:"蚌埠市"},{id:"133",name:"亳州市"},{id:"138",name:"巢湖市"},{id:"144",name:"池州市"},{id:"149",name:"滁州市"},{id:"158",name:"阜阳市"},{id:"167",name:"淮北市"},{id:"172",name:"淮南市"},{id:"179",name:"黄山市"},{id:"187",name:"六安市"},{id:"195",name:"马鞍山市"},{id:"200",name:"宿州市"},{id:"206",name:"铜陵市"},{id:"211",name:"芜湖市"},{id:"219",name:"宣城市"}]},{id:"227",name:"福建",city:[{id:"228",name:"福州市"},{id:"242",name:"龙岩市"},{id:"250",name:"南平市"},{id:"261",name:"宁德市"},{id:"271",name:"莆田市"},{id:"277",name:"泉州市"},{id:"290",name:"三明市"},{id:"303",name:"厦门市"},{id:"310",name:"漳州市"}]},{id:"322",name:"甘肃",city:[{id:"323",name:"兰州市"},{id:"332",name:"白银市"},{id:"338",name:"定西市"},{id:"346",name:"甘南藏族自治州"},{id:"355",name:"嘉峪关市"},{id:"356",name:"金昌市"},{id:"359",name:"酒泉市"},{id:"367",name:"临夏回族自治州"},{id:"376",name:"陇南市"},{id:"386",name:"平凉市"},{id:"394",name:"庆阳市"},{id:"403",name:"天水市"},{id:"411",name:"武威市"},{id:"416",name:"张掖市"}]},{id:"423",name:"广东",city:[{id:"424",name:"广州市"},{id:"437",name:"潮州市"},{id:"441",name:"东莞市"},{id:"442",name:"佛山市"},{id:"448",name:"河源市"},{id:"455",name:"惠州市"},{id:"461",name:"江门市"},{id:"469",name:"揭阳市"},{id:"475",name:"茂名市"},{id:"482",name:"梅江区"},{id:"483",name:"梅州市"},{id:"491",name:"清远市"},{id:"500",name:"汕
4000
头市"},{id:"508",name:"汕尾市"},{id:"513",name:"韶关市"},{id:"524",name:"深圳市"},{id:"531",name:"阳江市"},{id:"536",name:"云浮市"},{id:"542",name:"湛江市"},{id:"552",name:"肇庆市"},{id:"561",name:"中山市"},{id:"562",name:"珠海市"}]},{id:"566",name:"广西",city:[{id:"567",name:"南宁市"},{id:"580",name:"百色市"},{id:"593",name:"北海市"},{id:"598",name:"崇左市"},{id:"606",name:"防城港市"},{id:"611",name:"贵港市"},{id:"617",name:"桂林市"},{id:"635",name:"河池市"},{id:"647",name:"贺州市"},{id:"652",name:"来宾市"},{id:"659",name:"柳州市"},{id:"670",name:"钦州市"},{id:"675",name:"梧州市"},{id:"683",name:"玉林市"}]},{id:"690",name:"贵州",city:[{id:"691",name:"贵阳市"},{id:"702",name:"安顺市"},{id:"709",name:"毕节地区"},{id:"718",name:"六盘水市"},{id:"723",name:"黔东南苗族侗族自治州"},{id:"740",name:"黔南布依族苗族自治州"},{id:"753",name:"黔西南布依族苗族自治州"},{id:"762",name:"铜仁地区"},{id:"773",name:"遵义市"}]},{id:"788",name:"海南",city:[{id:"789",name:"海口市"},{id:"794",name:"白沙黎族自治县"},{id:"795",name:"保亭黎族苗族自治县"},{id:"796",name:"昌江黎族自治县"},{id:"797",name:"澄迈县"},{id:"798",name:"儋州市"},{id:"799",name:"定安县"},{id:"800",name:"东方市"},{id:"801",name:"乐东黎族自治县"},{id:"802",name:"临高县"},{id:"803",name:"陵水黎族自治县"},{id:"804",name:"南沙群岛"},{id:"805",name:"琼海市"},{id:"806",name:"琼中黎族苗族自治县"},{id:"807",name:"三亚市"},{id:"808",name:"屯昌县"},{id:"809",name:"万宁市"},{id:"810",name:"文昌市"},{id:"811",name:"五指山市"},{id:"812",name:"西沙群岛"},{id:"813",name:"中沙群岛的岛礁及其海域"}]},{id:"814",name:"河北",city:[{id:"815",name:"石家庄市"},{id:"839",name:"保定市"},{id:"865",name:"沧州市"},{id:"882",name:"承德市"},{id:"894",name:"邯郸市"},{id:"914",name:"衡水市"},{id:"926",name:"廊坊市"},{id:"937",name:"秦皇岛市"},{id:"945",name:"唐山市"},{id:"960",name:"邢台市"},{id:"980",name:"张家口市"}]},{id:"998",name:"河南",city:[{id:"999",name:"郑州市"},{id:"1012",name:"安阳市"},{id:"1022",name:"鹤壁市"},{id:"1028",name:"济源市"},{id:"1029",name:"焦作市"},{id:"1041",name:"开封市"},{id:"1052",name:"洛阳市"},{id:"1068",name:"漯河市"},{id:"1074",name:"南阳市"},{id:"1088",name:"平顶山市"},{id:"1099",name:"濮阳市"},{id:"1106",name:"三门峡市"},{id:"1113",name:"商丘市"},{id:"1123",name:"新乡市"},{id:"1136",name:"信阳市"},{id:"1147",name:"许昌市"},{id:"1154",name:"周口市"},{id:"1165",name:"驻马店市"}]},{id:"1176",name:"黑龙江",city:[{id:"1177",name:"哈尔滨市"},{id:"1197",name:"大庆市"},{id:"1207",name:"大兴安岭地区"},{id:"1211",name:"鹤岗市"},{id:"1220",name:"黑河市"},{id:"1227",name:"鸡西市"},{id:"1237",name:"佳木斯市"},{id:"1249",name:"牡丹江市"},{id:"1260",name:"七台河市"},{id:"1265",name:"齐齐哈尔市"},{id:"1282",name:"双鸭山市"},{id:"1291",name:"绥化市"},{id:"1302",name:"伊春市"}]},{id:"1320",name:"湖北",city:[{id:"1321",name:"武汉市"},{id:"1335",name:"鄂州市"},{id:"1339",name:"恩施土家族苗族自治州"},{id:"1348",name:"黄冈市"},{id:"1359",name:"黄石市"},{id:"1366",name:"荆门市"},{id:"1372",name:"荆州市"},{id:"1381",name:"潜江市"},{id:"1382",name:"神农架林区"},{id:"1383",name:"十堰市"},{id:"1392",name:"随州市"},{id:"1395",name:"天门市"},{id:"1396",name:"仙桃市"},{id:"1397",name:"咸宁市"},{id:"1404",name:"襄樊市"},{id:"1414",name:"孝感市"},{id:"1422",name:"宜昌市"},{id:"3268",name:"襄阳市"}]},{id:"1436",name:"湖南",city:[{id:"1437",name:"长沙市"},{id:"1447",name:"常德市"},{id:"1457",name:"郴州市"},{id:"1469",name:"衡阳市"},{id:"1482",name:"怀化市"},{id:"1495",name:"娄底市"},{id:"1501",name:"邵阳市"},{id:"1514",name:"湘潭市"},{id:"1520",name:"湘西土家族苗族自治州"},{id:"1529",name:"益阳市"},{id:"1536",name:"永州市"},{id:"1548",name:"岳阳市"},{id:"1558",name:"张家界市"},{id:"1563",name:"株洲市"}]},{id:"1573",name:"吉林",city:[{id:"1574",name:"长春市"},{id:"1585",name:"白城市"},{id:"1591",name:"白山市"},{id:"1598",name:"吉林市"},{id:"1608",name:"辽源市"},{id:"1613",name:"四平市"},{id:"1620",name:"松原市"},{id:"1626",name:"通化市"},{id:"1634",name:"延边朝鲜族自治州"}]},{id:"1643",name:"江苏",city:[{id:"1644",name:"南京市"},{id:"1658",name:"常州市"},{id:"1666",name:"淮安市"},{id:"1675",name:"连云港市"},{id:"1683",name:"南通市"},{id:"1692",name:"苏州市"},{id:"1704",name:"宿迁市"},{id:"1710",name:"泰州市"},{id:"1717",name:"无锡市"},{id:"1726",name:"徐州市"},{id:"1738",name:"盐城市"},{id:"1748",name:"扬州市"},{id:"1756",name:"镇江市"}]},{id:"1763",name:"江西",city:[{id:"1764",name:"南昌市"},{id:"1774",name:"抚州市"},{id:"1786",name:"赣州市"},{id:"1805",name:"吉安市"},{id:"1819",name:"景德镇市"},{id:"1824",name:"九江市"},{id:"1837",name:"萍乡市"},{id:"1843",name:"上饶市"},{id:"1856",name:"新余市"},{id:"1859",name:"宜春市"},{id:"1870",name:"鹰潭市"}]},{id:"1874",name:"辽宁",city:[{id:"1875",name:"沈阳市"},{id:"1889",name:"鞍山市"},{id:"1897",name:"本溪市"},{id:"1904",name:"朝阳市"},{id:"1912",name:"大连市"},{id:"1923",name:"丹东市"},{id:"1930",name:"抚顺市"},{id:"1938",name:"阜新市"},{id:"1946",name:"葫芦岛市"},{id:"1953",name:"锦州市"},{id:"1961",name:"辽阳市"},{id:"1969",name:"盘锦市"},{id:"1974",name:"铁岭市"},{id:"1982",name:"营口市"}]},{id:"1989",name:"内蒙古",city:[{id:"1990",name:"呼和浩特市"},{id:"2000",name:"阿拉善盟"},{id:"2004",name:"巴彦淖尔市"},{id:"2012",name:"包头市"},{id:"2022",name:"赤峰市"},{id:"2035",name:"鄂尔多斯市"},{id:"2044",name:"呼伦贝尔市"},{id:"2058",name:"通辽市"},{id:"2067",name:"乌海市"},{id:"2071",name:"乌兰察布市"},{id:"2083",name:"锡林郭勒盟"},{id:"2096",name:"兴安盟"}]},{id:"2103",name:"宁夏",city:[{id:"2104",name:"银川市"},{id:"2111",name:"固原市"},{id:"2117",name:"石嘴山市"},{id:"2121",name:"吴忠市"},{id:"2126",name:"中卫市"}]},{id:"2130",name:"青海",city:[{id:"2131",name:"西宁市"},{id:"2139",name:"果洛藏族自治州"},{id:"2146",name:"海北藏族自治州"},{id:"2151",name:"海东地区"},{id:"2158",name:"海南藏族自治州"},{id:"2164",name:"海西蒙古族藏族自治州"},{id:"2170",name:"黄南藏族自治州"},{id:"2175",name:"玉树藏族自治州"}]},{id:"2182",name:"山东",city:[{id:"2183",name:"济南市"},{id:"2194",name:"滨州市"},{id:"2202",name:"德州市"},{id:"2214",name:"东营市"},{id:"2220",name:"菏泽市"},{id:"2230",name:"济宁市"},{id:"2243",name:"莱芜市"},{id:"2246",name:"聊城市"},{id:"2255",name:"临沂市"},{id:"2268",name:"青岛市"},{id:"2281",name:"日照市"},{id:"2286",name:"泰安市"},{id:"2293",name:"威海市"},{id:"2298",name:"潍坊市"},{id:"2311",name:"烟台市"},{id:"2324",name:"枣庄市"},{id:"2331",name:"淄博市"}]},{id:"2340",name:"山西",city:[{id:"2341",name:"太原市"},{id:"2352",name:"长治市"},{id:"2366",name:"大同市"},{id:"2378",name:"晋城市"},{id:"2385",name:"晋中市"},{id:"2397",name:"临汾市"},{id:"2415",name:"吕梁市"},{id:"2429",name:"朔州市"},{id:"2436",name:"忻州市"},{id:"2451",name:"阳泉市"},{id:"2457",name:"运城市"}]},{id:"2471",name:"陕西",city:[{id:"2472",name:"西安市"},{id:"2486",name:"安康市"},{id:"2497",name:"宝鸡市"},{id:"2510",name:"汉中市"},{id:"2522",name:"商洛市"},{id:"2530",name:"铜川市"},{id:"2535",name:"渭南市"},{id:"2547",name:"咸阳市"},{id:"2562",name:"延安市"},{id:"2576",name:"榆林市"}]},{id:"2589",name:"四川",city:[{id:"2590",name:"成都市"},{id:"2610",name:"阿坝藏族羌族自治州"},{id:"2624",name:"巴中市"},{id:"2629",name:"达州市"},{id:"2637",name:"德阳市"},{id:"2644",name:"甘孜藏族自治州"},{id:"2663",name:"广安市"},{id:"2669",name:"广元市"},{id:"2677",name:"乐山市"},{id:"2689",name:"凉山彝族自治州"},{id:"2707",name:"泸州市"},{id:"2715",name:"眉山市"},{id:"2722",name:"绵阳市"},{id:"2732",name:"内江市"},{id:"2738",name:"南充市"},{id:"2748",name:"攀枝花市"},{id:"2754",name:"遂宁市"},{id:"2760",name:"雅安市"},{id:"2769",name:"宜宾市"},{id:"2780",name:"资阳市"},{id:"2785",name:"自贡市"}]},{id:"2792",name:"西藏",city:[{id:"2793",name:"拉萨市"},{id:"2802",name:"阿里地区"},{id:"2810",name:"昌都地区"},{id:"2822",name:"林芝地区"},{id:"2830",name:"那曲地区"},{id:"2841",name:"日喀则地区"},{id:"2860",name:"山南地区"}]},{id:"2873",name:"新疆",city:[{id:"2874",name:"乌鲁木齐市"},{id:"2883",name:"阿克苏地区"},{id:"2893",name:"阿拉尔市"},{id:"2894",name:"阿勒泰地区"},{id:"2902",name:"巴音郭楞蒙古自治州"},{id:"2912",name:"博尔塔拉蒙古自治州"},{id:"2916",name:"昌吉回族自治州"},{id:"2925",name:"哈密地区"},{id:"2929",name:"和田地区"},{id:"2938",name:"喀什地区"},{id:"2951",name:"克拉玛依市"},{id:"2956",name:"克孜勒苏柯尔克孜自治州"},{id:"2961",name:"石河子市"},{id:"2962",name:"塔城地区"},{id:"2970",name:"图木舒克市"},{id:"2971",name:"吐鲁番地区"},{id:"2975",name:"五家渠市"},{id:"2976",name:"伊犁哈萨克自治州"}]},{id:"2987",name:"云南",city:[{id:"2988",name:"昆明市"},{id:"3003",name:"保山市"},{id:"3009",name:"楚雄彝族自治州"},{id:"3020",name:"大理白族自治州"},{id:"3033",name:"德宏傣族景颇族自治州"},{id:"3039",name:"迪庆藏族自治州"},{id:"3043",name:"红河哈尼族彝族自治州"},{id:"3057",name:"丽江市"},{id:"3063",name:"临沧市"},{id:"3072",name:"怒江傈僳族自治州"},{id:"3077",name:"曲靖市"},{id:"3087",name:"思茅市"},{id:"3098",name:"文山壮族苗族自治州"},{id:"3107",name:"西双版纳傣族自治州"},{id:"3111",name:"玉溪市"},{id:"3121",name:"昭通市"},{id:"3267",name:"普洱市"}]},{id:"3133",name:"浙江",city:[{id:"3134",name:"杭州市"},{id:"3148",name:"湖州市"},{id:"3154",name:"嘉兴市"},{id:"3162",name:"金华市"},{id:"3172",name:"丽水市"},{id:"3182",name:"宁波市"},{id:"3194",name:"衢州市"},{id:"3201",name:"绍兴市"},{id:"3208",name:"台州市"},{id:"3218",name:"温州市"},{id:"3230",name:"舟山市"}]},{id:"3235",name:"香港",city:[{id:"3236",name:"九龙"},{id:"3237",name:"香港岛"},{id:"3238",name:"新界"}]},{id:"3239",name:"澳门",city:[{id:"3240",name:"澳门半岛"},{id:"3241",name:"离岛"}]},{id:"3242",name:"台湾",city:[{id:"3243",name:"台北市"},{id:"3244",name:"高雄市"},{id:"3245",name:"高雄县"},{id:"3246",name:"花莲县"},{id:"3247",name:"基隆市"},{id:"3248",name:"嘉义市"},{id:"3249",name:"嘉义县"},{id:"3250",name:"金门县"},{id:"3251",name:"苗栗县"},{id:"3252",name:"南投县"},{id:"3253",name:"澎湖县"},{id:"3254",name:"屏东县"},{id:"3255",name:"台北县"},{id:"3256",name:"台东县"},{id:"3257",name:"台南市"},{id:"3258",name:"台南县"},{id:"3259",name:"台中市"},{id:"3260",name:"台中县"},{id:"3261",name:"桃园县"},{id:"3262",name:"新竹市"},{id:"3263",name:"新竹县"},{id:"3264",name:"宜兰县"},{id:"3265",name:"云林县"},{id:"3266",name:"彰化县"}]}]};

最后，页面上需要一个元素在触发区域选择:

    var cityPicker = new cityPickers({
        target: '#cityChoice'
    });

    cityPicker.init();

HTML元素如下:
<div class="contentInfo">
<label><span class="starcolor">* </span>区域</label>
<input type="text" id="cityChoice">
</div>
方法集封装于一个js文件中：
/**
*
* var cityPicker = new cityPicker({
* data: cityData, 城市数据
* target: '#targetID', 目标元素ID（如：文本框，该值为城市名称）
* valType: 'k;;v', 隐藏域的值类型（取值有：'k' => 只存ID，'k;;v' => 存ID和名称，格式为：id;;name）
* hideProvinceInput: '#hideID' 省份隐藏域ID（如果不需要存省份，此项可以省略）
* hideCityInput: '#hideID' 城市隐藏域ID
* callback: function(city_id){ 回调函数，选择城市后调用，city_id为选择的城市的ID
* }
* });
*
* cityPicker.init();
*/
var cityPickers = function(options){
this.template = $('<div class="cssflow-city-picker" id="cssflow_city_picker"><div class="cssflow-hot-wrap"><p>热门城市</p><ul id="cssflow_hot_city"></ul></div><div class="line"></div><div class="cssflow-wrap"><p>选择省份</p><ul class="cssflow-province-wrap" id="cssflow_province_wrap"></ul></div></div>');
this.hot_city = $('#cssflow_hot_city', this.template);
this.province_wrap = $('#cssflow_province_wrap', this.template);
this.settings = {
"data": cityData ||{},
"target": $(options.target),
"callback": options.callback || ''
};
};

cityPickers.prototype = {
init: function(){
var that = this;

$(window).click(function(event) {
/* Act on the event */
that.template.remove();
}).resize(function(){//窗口大小变动的时候
that.template.remove();
});

that.settings.target.attr({"readonly":true,"valid":"city"});

that.targetEvent();
},

buildCityPicker: function(){
var that = this;

that.buildHotCityTpl();
that.buildProvinceTpl();
that.provinceEvent();
that.cityEvent();
that.cleanBtnEvent();
},

buildHotCityTpl: function(){
var that = this;

var hot_city = that.settings.data.hot;
var hot_city_html = '';

for(var i = 0, len = hot_city.length; i < len; i++){
hot_city_html += '<li class="cssflow-hot-city" data-id="' + hot_city[i]['id'] + '" data-name="' + hot_city[i]['name'] + '" data-pid="' + hot_city[i]['pid'] + '" data-pname="' + hot_city[i]['pname'] + '">' + hot_city[i]['name'] + '</li>';
}

that.hot_city.html(hot_city_html);
},

buildProvinceTpl: function(){
var that = this;

var province = that.settings.data.province;
var province_html = '';
for(var i = 0, len = province.length; i < len; i++){
province_html += '<li class="cssflow-province" data-id="' + province[i]['id'] + '" data-name="' + province[i]['name'] + '"><ul class="cssflow-city-wrap"></ul><div class="cssflow-province-name">' + province[i]['name'] + '</div></li>';
}

province_html += '<li class="cssflow-clean"><input type="button" class="cssflow-clean-btn" id="cssflow_clean_btn" value="清 空"></li>'

that.province_wrap.html(province_html);
},

buildCityTpl: function(cur_province){
var that = this;

var pid = cur_province.data('id');
var poi = cur_province.position();
var province = that.settings.data.province;
var city;
var city_html = '';

for(var i = 0, plen = province.length; i < plen; i++){
if(province[i]['id'] == parseInt(pid)){
city = province[i]['city'];
break;
}
}
for(var j = 0, clen = city.length; j < clen; j++){
city_html += '<li class="cssflow-city" data-id="' + city[j]['id'] + '" data-name="' + city[j]['name'] + '" title="' + city[j]['name'] + '">' + city[j]['name'] + '</li>';
}

cur_province.find('.cssflow-city-wrap').html(city_html).css('left', '-' + (poi.left - 37) + 'px').show();
},

provinceEvent: function(){
var that = this;

that.province_wrap.on('click', '.cssflow-province', function(event){
event.preventDefault();
event.stopPropagation();
/* Act on the event */
var _this = $(this);

if(!_this.hasClass('active')){
902c

that.province_wrap.find('.cssflow-province').removeClass('active');
that.province_wrap.find('.cssflow-province-name').removeClass('active');
that.province_wrap.find('.cssflow-city-wrap').hide().children().remove();

_this.addClass('active');
_this.find('.cssflow-province-name').addClass('active');

that.buildCityTpl(_this);
}else{
_this.removeClass('active');
_this.find('.cssflow-province-name').removeClass('active');

_this.find('.cssflow-city-wrap').hide().children().remove();
}

return false;
});
},

cityEvent: function(){
var that = this;

that.hot_city.on('click', '.cssflow-hot-city', function(event) {
event.preventDefault();
event.stopPropagation();
/* Act on the event */
var _this = $(this);

var cid = _this.data('id');
var cname = _this.data('name');
var pid = _this.data('pid');
var pname = _this.data('pname');
//存值
$(this).data("result",{"province":pid + ';;' + pname,"city":cid + ';;' + cname});

that.settings.target.val(pname+"-"+cname);
that.template.remove();

if(that.settings.callback) that.settings.callback(pid + ';;' + pname+ ';;' + cid + ';;' + cname);

return false;
});

that.province_wrap.on('click', '.cssflow-city', function(event) {
event.preventDefault();
event.stopPropagation();
/* Act on the event */
var _this = $(this);

var cid = _this.data('id');
var cname = _this.data('name');
var pele = _this.parent().parent();
var pid = pele.data('id');
var pname = pele.data('name');

//存值
$(this).data("result",{"province":pid + ';;' + pname,"city":cid + ';;' + cname});

that.settings.target.val(pname+"-"+cname);
that.template.remove();

if(that.settings.callback) that.settings.callback(pid + ';;' + pname+ ';;' + cid + ';;' + cname);

return false;
});
},

cleanBtnEvent: function(){
var that = this;

that.province_wrap.on('click', '#cssflow_clean_btn', function(event){
event.preventDefault();
event.stopPropagation();
/* Act on the event */
that.settings.target.val('');
//清空值
$(this).removeData("result");

that.template.remove();

if(that.settings.callback) that.settings.callback(0);

return false;
});
},

targetEvent: function(){
var that = this;

that.settings.target.click(function(event){
event.stopPropagation();
/* Act on the event */
var _this = $(this);

that.buildCityPicker();

var offset = _this.offset();
var top = offset.top + _this.outerHeight() + 15;

that.template.css({
'left': offset.left,
'top': top
});

$('body').append(that.template);

return false;
});
}

};适配的话，在768分辨率下会存在一点小小的问题，我暂时没有去完善，但是功能是比较简单好用的