this.init();
};
var p = CityPicker.prototype;
p.init = function () {
this.initEvent();
this.preventPopKeyboard();
};
p.preventPopKeyboard = function () {
if (this.elType) {
this.el.prop("readonly", true);
}
};
p.initEvent = function () {
this.el.on("focus", function (e) {
var pickerBox = $(".picker-box");
if (pickerBox[0]) {
pickerBox.show();
} else {
this.create();
}
}.bind(this));
};
p.create = function () {
this.createCityPickerBox();
this.createProList();
this.proClick();
this.createNavBar();
this.navEvent();
};
p.createCityPickerBox = function () {
var proBox = "<div class='picker-box'></div>";
$("body").append(proBox);
};
p.createProList = function () {
var provinces = this.provinces;
var proBox;
var dl = "";
for (var letterKey in provinces) {
var val = provinces[letterKey];
if (provinces.hasOwnProperty(letterKey)) {
var dt = "<dt id='" + letterKey + "'>" + letterKey + "</dt>";
var dd = "";
for (var proKey in val) {
if (val.hasOwnProperty(proKey)) {
dd += "<dd data-letter=" + letterKey + ">" + proKey + "</dd>";
}
}
dl += "<dl>" + dt + dd + "</dl>";
}
}
proBox = "<section class='pro-picker'>" + dl + "</section>";
$(".picker-box").append(proBox);
};
p.createCityList = function (letter, pro) {
var cities = this.provinces[letter][pro];
var ul, li = "";
cities.forEach(function (city, i) {
li += "<li>" + city + "</li>";
});
ul = "<ul class='city-picker'>" + li + "</ul>";
$(".picker-box").find(".city-picker").remove().end().append(ul);
this.cityClick();
};
p.proClick = function () {
var that = this;
$(".pro-picker").on("click", function (e) {
var target = e.target;
if ($(target).is("dd")) {
that.pro = $(target).html();
var letter = $(target).data("letter");
that.createCityList(letter, that.pro);
$(this).hide();
}
});
};
p.cityClick = function () {
var that = this;
$(".city-picker").on("click", function (e) {
var target = e.target;
if ($(target).is("li")) {
that.city = $(target).html();
if (that.elType) {
that.el.val(that.pro + "-" + that.city);
} else {
that.el.html(that.pro + "-" + that.city);
}
$(".picker-box").hide();
$(".pro-picker").show();
$(this).hide();
}
});
};
p.createNavBar = function () {
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var arr = str.split("");
var a = "";
arr.forEach(function (item, i) {
a += '<a href="#' + item + '">' + item + '</a>';
});
var div = '<div class="navbar">' + a + '</div>';
