想做一个省市区的三级联动，怎么设计（代码和数据组织）更合理？

Question

想做一个省市区的三级联动，怎么设计（代码和数据组织）更合理？

Answer 1

别太担心，原则有这些：

1. 只有HARD CODE是绝不可原谅的。但如果在HTML中，数据还很少，也可以例外。
2. 选好省级之后等待一下没有问题，但选好市级了还要等就有点沮丧。
3. 可以增加文件数量来做缓存，但又别增加的太多太碎。
4. 小程序怎样都无所谓。

省市区的列表我做过，如果单一文件需要70KB以上来保存(json)，这个尺寸也不小。

所以建议存储结构为一级多个文件：每个省的数据分开，每省一个文件为该省的市和区列表。至于省的列表，不妨直接写进HTML里。选择（或修改了）省之后，AJAX加载后两级，把市区两级的下拉框填充上。别忘了可以把静态文件托管到外部CDN上，节省服务器资源。

不过如果你的网站规模够小，或干脆是用于本地程序就无所谓了，省市区一个文件全扔进去就行。

存储结构我建议json，简单有效。虽不像数据库那样可以查询或部分传输，但其实也根本不需要。——这个事情有个反面教材是Discuz X：他们居然把省市区这种死数据存入MySQL！一个程序员的愚蠢，害全中国的站长一起浪费宝贵的数据库资源，简直是罪无可逭。

Answer 2

首先省市区三级的数据在后台都有db在维护，有程序每隔一段时间会更新这些省市区数据的。 如果是完整数据的话，文件较大，前端压力不大可以考虑，做成json或者对象hash都行。 如果是每次select change的时候做ajax访问，那市和区就做成hash缓存，用动态语言直接查缓存返回。也可以hash成多个文件，ajax的时候直接访问对应编号的文件。 至于前端js代码的话，写个类封装下，这样复用起来比较方便。

Answer 3

无限级递归树形数据结构