海豚PHP搜索区域改造省市区县三级联动搜索

一个项目中用户希望通过区域对订单进行筛选，但是查阅了海豚PHP框架文档后发现searchArea并不支持三级联动，因此手动进行了一个简单的改造，使用三个select框完成地区的筛选。以下为实现笔记。

第一步：在搜索区域添加三个Select下拉选框，用于省市区县的联动选择。

  1. $search        = [
  2.             ['select','province','省份选择','','',$province],
  3.             ['select','city','城市选择','','',[]],
  4.             ['select','region','区县选择','','',[]],
  5.         ];

其中省份的数据，需要自行查询并赋值。以便于用户从省份开始选择。

第二步：对Zbuilder增加额外JS，源代码如下：

  1. //监听省份选择
  2. $('select[name="province"]').on('change',function () {
  3.     var prov = $('select[name="province"] option:selected').val();
  4.     var cate = 'prov';
  5.     r(prov,cate);
  6. })
  7. //监听地区选择
  8. $('select[name="city"]').on('change',function () {
  9.     var city = $('select[name="city"] option:selected').val();
  10.     var cate = 'city';
  11.     r(city,cate);
  12. })
  14. function r(i,c) {
  15.     $.ajax({
  16.         'type':"post",
  17.         'url':"/admin.php/store/order/getRegionSelect",
  18.         'data':{"pid":i},
  19.         success:function (res) {
  20.             var yunsu = createHtml(res);
  22.             if (c == 'prov'){
  23.                 console.log('11111',$("#search_city").children())
  24.                 // $("#search_city").children().empty();
  25.                 // $("#search_region").children().empty();
  26.                 $("#search_city").html(yunsu);
  27.             }else if(c == 'city'){
  28.                 console.log('search_region',yunsu)
  29.                 // $("#search_region").children().empty();
  30.                 $("#search_region").html(yunsu);
  31.             }
  32.         }
  33.     })
  34. }
  36. /**
  37.  * 组合html
  38.  */
  39. function createHtml(data) {
  40.     var html = '<option value="">请选择区域</option>';
  41.     $.each(data,function (key,value) {
  42.         html += '<option value="'+key+'">'+value+'</option>';
  43.     })
  44.     return html;
  45. }

第三步：编写地区查询接口，也就是上一步中的查询接口。返回数据以城市ID为key，以城市名称为value即可。查询很简单，就不放代码了。

完成以上三步后，基本上搜索区域的省市区县三级联动就结束了。需要值得一提的是，如果你的查询参数中需要用到province、city两个参数，可以直接使用。如果查询参数只需要区县的参数，把province和city去掉的时候，一定要对查询的数组重建索引。让where条件的数组索引从0开始。否则thinkPHP的where查询会报错。

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！