layui三级联动【PHP版】

前言：今天在写城市三级联动的时候发现，当选择某个选项为空的时候，无法清空选项信息，所以特此做个记录，也好给需要这个功能的小伙伴一些启示和参考，重点描述前端如何操作！JS请求可写公共方法调用！

第一准备工作：准备城市信息SQL

第二前端页面【Laui】：

HTML:

---

<div class="layui-form-item">
   <label class="layui-form-label">站点区域</label>
   <div class="layui-input-inline">
      <select name="provinceId"  id="province" lay-filter="province"  lay-verify="required">
         <option value="">请选择省份</option>
         {volist name="province" id="vo"}
         <option value="{$vo.id}">{$vo.area_name}</option>
         {/volist}
      </select>
   </div>
   <div class="layui-input-inline">
      <select name="cityId"  id="city" lay-filter="city" lay-verify="required">
         <option value="">请选择城市</option>
      </select>
   </div>
   <div class="layui-input-inline">
      <select name="districtId"  id="district" lay-verify="required">
         <option value="">请选择区县</option>
      </select>
   </div>
   <div class="layui-form-mid layui-word-aux">（必填）</div>
</div>

JS:

---

   // 一级联动事件触发
           form.on('select(province)', function(data){
               var id = data.value;
               if(!id) {
                   //重置城市数据
                   var continentOption="<option value=''>请选择城市</option>";
                   $("#city").empty();//清空上一个查询下拉值
                   $("#city").append(continentOption);
                   form.render();  //重新渲染form表单  否则动态option不生效
   //重置区县数据
                   var continentOption="<option value=''>请选择区县</option>";
                   $("#district").empty();//清空上一个查询下拉值
                   $("#district").append(continentOption);
                   form.render();  //重新渲染form表单  否则动态option不生效
                   return;
}
                   //请求接口
                   admin.req({
                       url: '/admin/vis/add', //实际使用请改成服务端真实接口
                       data: {'id': id},
                       method: "POST",
                       done: function (data) {
                           $("#city").html("<option value=''>请选择城市</option>");
                           $.each(data.data, function (index, item) {
                               $('#city').append(new Option(item.area_name, item.id));//往下拉菜单里添加元素
                               form.render('select'); //这个很重要
                           });
                       }
                   });
           });

           // 二级联动事件触发
           form.on('select(city)', function(data){
               var id = data.value;
               if(!id) {
                   var continentOption="<option value=''>请选择区县</option>";
                   $("#district").empty();//清空上一个查询下拉值
                   $("#district").append(continentOption);
                   form.render();  //重新渲染form表单  否则动态option不生效
                   return;
               }

                   //请求接口
                   admin.req({
                       url: '/admin/vis/add', //实际使用请改成服务端真实接口
                       data: {'id': id},
                       method: "POST",
                       done: function (data) {
                           $("#district").html("<option value=''>请选择区县</option>");
                           $.each(data.data, function (index, item) {
                               $('#district').append(new Option(item.area_name, item.id));//往下拉菜单里添加元素
                               form.render('select'); //这个很重要
                           });
                       }
                   });
           });

• 点赞
• 收藏
• 分享
• • 文章举报

Jack_num1 发布了29 篇原创文章 · 获赞 6 · 访问量 5万+ 私信 关注

标签：district,form,continentOption,layui,item,联动,PHP,data,id
来源： https://blog.csdn.net/Jack_num1/article/details/104554413