layui三级联动【PHP版】

2020-02-28 13:01:25 阅读：412 来源： 互联网

标签：district form continentOption layui item 联动 PHP data id

前言：今天在写城市三级联动的时候发现，当选择某个选项为空的时候，无法清空选项信息，所以特此做个记录，也好给需要这个功能的小伙伴一些启示和参考，重点描述前端如何操作！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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

layui三级联动【PHP版】