JavaScript全国二级联动地址插件
全国地址的二级联动下拉，用 JS 实现其实不难，但想做得灵活、性能还不错，还真得花点小心思。这个插件就挺实用，数据结构清晰，逻辑也简单，适合直接拿来用或者做二次开发。用的是标准的 JSON 数据，再配合fetch或者XMLHttpRequest搞定异步加载，响应也快，交互还蛮顺滑。
两级联动的原理其实直白：监听省份的change事件，选了哪个省，就加载它下面的城市，更新城市下拉框。插件代码封装得还不错，JS 逻辑拆分清晰，就算你要对接自己的一套接口，改起来也不麻烦。
HTML 那块，就是俩标签，一个放省，一个放市。JS 里一般用addEventListener绑事件，再用innerHTML把城市选项插进去。常用的结构像：
{
"广东": ["广州", "深圳", "珠海"],
"江苏": ["南京", "苏州", "无锡"]
}要说优化嘛，异步加载+缓存是标配。别一上来就把所有省市全加载，太占资源。可以把城市数据按需加载，点了哪个省就拉哪个的城市列表。频繁点的还可以加个缓存逻辑，用个对象存下加载过的数据，避免重复求。
跨浏览器兼容也考虑到了，IE 都能跑（现在谁还在意 IE 啊，不过有就更稳妥了）。代码没用太新潮的语法，维护也方便。你要是表单里需要省市选择的功能，直接上这个插件，省事不少。
顺便，推荐几个还不错的相关资源，有源码、有 demo，点进去看看就知道了：
如果你正好要做地区选择的表单，不妨试试这个插件，简单实用，还挺省心的。
下载地址
用户评论
