PC端地址选择器（省、市、区）

前言：项目需要使用PC版的地址选择器，本想直接找一个插件，但网上大多是移动端的，与PC端功能要求不符，不符PC端比较接近的都是基于react和vue的，而当前项目还未使用这些框架，难免冲突；想想没有那么复杂，索性自己写一个，满足基本需求即可；

PC端使用常用select下拉框，级联效果由JSON与change事件控制；过程中使用tmpl方法去换不同省对应的市、区；tmpl相关参考：tmpl基础介绍

1 dom结构与tmpl

通过id 选择元素，tmpl地址选择器内容，tmpl文件格式如下（使用的class为当前框架自带，只是显示风格不同，不影响js功能）

addressPicker  tmpl文件

addressPicker 省市区子模板

2 JSON（数据并不完整，只作为结构参考）

说明：省数据及各自对应的市区数据分别为数组，市区数据为对象，将各省/市的id作为key,以查找对应的市/区数据;

address picker ——JSON 格式

JSON —— districtData

3相关事件

init时通过id对省部分进行tmpl;市区部分直接通过子模板引入；
选择省/市之后对下一级的市/区进行tmpl，此时需要获取对应数据，且默认第一个市/区选中（选择省后默认选中第一个市及第一个市下的第一个区）；
注意：json中市\区data格式为数组对象，获取时用obj.key方式无法获取，应使用obj[key];
相关JS代码如下；

addressPicker  JS function

4 问题与解决

当前选择器选择地址及相关级联没有问题，但是部分地址编辑模块有默认地址，若只在当前部分写入地址选择器，则可将默认的id与option中的id 进行比对，相同时选中即可；

若需要写为插件公用，此处处理就有点问题;

解决办法：省市区id设默认值为0（零，这个字体看着好像“o,O”），若存在默认地址，给默认id重新赋值；    init()时tmpl 省市区全部数据，tmpl省市时判断，若默认值大于0，tmpl对应省/市下的全部市/区；否则市区数据赋空值；
tmpl文件修改后如下；

addressPickerDom

addressPicker -省市区子模板

js修改后如下：

关于默认地址的JS修改

写在末尾

至此，基础功能已基本实现，代码部分还有待优化，望有心人指点，不胜感激。