自己动手利用Layui开发省市区联动下拉框

其实省市区联动下拉框的开发并不复杂,但是多数时候我们则更倾向于使用别人开发好的现成的级联下拉框组件。今天波波不是特别忙,就分享下省市区联动下拉框的开发。我们之所以要开发它是因为通常情况下我们需要前端的城市ID与数据库保持一致,方便检索。

全国行政区划的级联下拉框开发一般有两种模式:一种是静态的,一种是动态的。所谓静态的级联下拉框则是首先把需要用到的相关数据保存为json或xml等便于检索的格式,然后在选择过程中从静态的文件中搜索出下一级的结果,然后渲染到页面中。而动态的则很容易理解,就是每次选择后便直接通过后台查询下一级的数据,并将动态获取的结果渲染到html页面中。

下面以动态查询为例,我们首先看下预览效果:

利用Layui开发省市区联动下拉框

HTML部分:

  1. <div class="layui-form-item layui-inline">
  2.         <label class="layui-form-label">行政区域</label>
  3.         <div class="layui-input-inline">
  4.             <select name="province" lay-filter="province" data-value="{$Think.get.province|default=''}" id="province">
  5.                 {$province}
  6.             </select>
  7.         </div>
  8.         <div class="layui-input-inline">
  9.             <select name="city" lay-filter="city" data-value="{$Think.get.city|default=''}" id="city">
  10.             </select>
  11.         </div>
  12.         <div class="layui-input-inline">
  13.             <select name="area" lay-filter="area" data-value="{$Think.get.area|default=''}" id="area">
  14.             </select>
  15.         </div>
  16.         <div class="layui-input-inline">
  17.             <select name="street" lay-filter="street" data-value="{$Think.get.street|default=''}" id="street">
  18.             </select>
  19.         </div>
  20.     </div>
  21.     <div class="layui-form-item layui-inline">
  22.         <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
  23.     </div>

JS部分:

  1. <script>
  2.         window.form.render();
  3.         layui.use(['form'],function () {
  4.             var form = layui.form;
  5.             form.on('select(province)',function (data) {
  6.                 var prov = data.value;
  7.                 $.post('{:url("area_query")}',{"area_id":prov},function (ret) {
  8.                     $("#city").empty();
  9.                     $("#area").empty();
  10.                     $("#street").empty();
  11.                     $("#city").append(ret);
  12.                     window.form.render();
  13.                 })
  14.             })
  15.             form.on('select(city)',function (data) {
  16.                 var city = data.value;
  17.                 $.post('{:url("area_query")}',{"area_id":city},function (ret) {
  18.                     $("#area").empty();
  19.                     $("#street").empty();
  20.                     $("#area").append(ret);
  21.                     window.form.render();
  22.                 })
  23.             })
  24.             form.on('select(area)',function (data) {
  25.                 var area = data.value;
  26.                 $.post('{:url("area_query")}',{"area_id":area},function (ret) {
  27.                     $("#street").empty();
  28.                     $("#street").append(ret);
  29.                     window.form.render();
  30.                 })
  31.             })
  32.         })
  33.     </script>

PHP查询接口:

  1. public function area_query(){
  2.         $area_id = input('post.area_id','','intval');
  3.         $list = Db::name("system_region_copy")->where(['pid'=>$area_id])->field('id,pid,name,type')->select();
  4.         $data = '<option value="">请选择</option>'.PHP_EOL;
  5.         foreach ($list as $key=>$value){
  6.             $data .= "<option value='".$value['id']."'>".$value['name']."</option>".PHP_EOL;
  7.         }
  8.         return json($data);
  9.     }

如果想查询所有的省份,PID=0即可。如需全国省市区街道数据库可以点击此处下载

其实很多东西我们用惯了别人写的组件后,不妨自己写写,一切实现挺简单的。

 

波波
你想把广告放到这里吗?

发表评论

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