网站制作之省市区联动

来源： All文章

发布时间：2023-04-27 09:47:15

　　在网站建设的过程中，随着时间的积累，我们可能会碰到各种各样的功能开发，毕竟客户的需求是无穷的。而省市区联动也是比较常见的功能模块，网上也有各种各样的第三方插件，但是我发现这些插件都有一个问题，都是全国的省市区联动，不够灵活，而我们的需求是根据客户要求动态实现联动。

　　1.首先是前段页面的建设，如下图：

　　前端页面效果如下图所示：

　　之后我们要通过数据库获取省市区的数据信息，有人也许会问，为什么不通过ajax来异步获取，而要一次性直接获取，因为异步请求是需要去请求数据库的，可能会出现卡一下才出现下一级信息，可能实现效果不太好，所以我们采取一次性直接获取，如下图所示：

　　获取数据信息之后，我们在结合js，就能实现动态省市区联动了，具体如下图所示：

　　//获取省信息

　　functiongetP(){

　　varselect=$('#sel_p');

　　volistname=pid=item

　　varoption=optionvalue='{$item.category_id}'{$item.category_name}/option;

　　select.append(option);

　　/volist

　　}

　　//获取市信息

　　functiongetC(pId){

　　varselect=$('#sel_c');

　　select.empty();

　　volistname=cid=iten

　　if({$iten.parent_id}==pId){

　　Varoption=optionvalue='{$iten.category_id}'{$iten.category_name}/option;

　　select.append(option);

　　}

　　/volist

　　}

　　//获取区信息

　　functiongetA(aId){

　　varselect=$('#sel_a');

　　select.empty();

　　volistname=aid=ite

　　if({$ite.parent_id}==aId){

　　varoption=optionvalue='{$ite.category_id}'{$ite.category_name}/option;

　　select.append(option);

　　}

　　/volist

　　}

　　完成之后，最终实现效果如下图所示：

　　最后，希望可以帮到大家。

* 文章来源于网络，如有侵权，请联系客服删除处理。