html怎么做三级联动,【Web前端问题】想做一个省市区的三级联动，怎么设计（代码和数据组织）更合理？...

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

回答：

别太担心，原则有这些：

只有HARD CODE是绝不可原谅的。但如果在HTML中，数据还很少，也可以例外。

选好省级之后等待一下没有问题，但选好市级了还要等就有点沮丧。

可以增加文件数量来做缓存，但又别增加的太多太碎。

小程序怎样都无所谓。

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

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

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

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

回答：

首先省市区三级的数据在后台都有db在维护，有程序每隔一段时间会更新这些省市区数据的。

如果是完整数据的话，文件较大，前端压力不大可以考虑，做成json或者对象hash都行。

如果是每次select change的时候做ajax访问，那市和区就做成hash缓存，用动态语言直接查缓存返回。也可以hash成多个文件，ajax的时候直接访问对应编号的文件。

至于前端js代码的话，写个类封装下，这样复用起来比较方便。

回答：

无限级递归树形数据结构