layui实现动态获取两级联动数据

效果图
功能描述：页面加载时动态获取一级类别数据，根据一级类别选中的数据项动态获取二级类别的数据，并回显。

html模板

<div class="layui-inline">  <label class="layui-form-label" style="width: auto">一级类别<span style="color: red">*</span></label>  <div class="layui-input-inline">  <select id="firstCategoryId" name="firstCategoryId" lay-filter="search_firstCategory" lay-search="" >  <option value=""></option>  </select>  </div>
</div>
<div class="layui-inline">  <label class="layui-form-label" style="width: auto">二级类别<span style="color: red">*</span></label>  <div class="layui-input-inline">  <select id="secondCategoryId" name="secondCategoryId" lay-filter="search_secondCategory" lay-search="" >  <option value=""></option>  </select>  </div>
</div>

js代码

/** @params formId 表单id* @params select select标签的lay-filter的值* @params firstCategoryId，secondCategoryId select标签id*/
function renderCategorySelect(formId, select, firstCategoryId, secondCategoryId) { // 一级类别选择  $(function () {  $.ajax({  async: false,  url: SSP.ctxPath + "/category/getFirstCategory",  type: 'get',  dataType: 'json',  success: function (res) {  if (res.code === 200){  var list = res.data;  $('#firstCategoryId').empty();  var s = '<option value="">请选择一级类别</option>';  $.each(list, function (index, item) {  if (item.id == firstCategoryId) {  s = s + '<option value="' + item.id + '" selected="selected">' + item.categoryName + '</option>';  } else {  s = s + '<option value="' + item.id + '">' + item.categoryName + '</option>';  }  });  $('#'+formId+' #firstCategoryId').html(s);  // 重新渲染，固定写法  form.render('select');  }  },  error: function (XMLHttpRequest) {  submit = false;  layer.alert("错误提示" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {icon: 0});  }  });  });  // 二级类别选择  form.on('select('+select+')', function (data) {  var firstCategoryId = data.value;  var s = '<option value="">请选择二级类别</option>';  if (firstCategoryId == ''){  $('#'+formId+' #secondCategoryId').html(s);  form.render('select');  } else {  $.ajax({  async: false,  url: SSP.ctxPath + "/consult/category/getSecondCategory",  type: 'get',  data: {firstCategoryId: firstCategoryId},  dataType: 'json',  success: function (res) {  if (res.code === 200){  var list = res.data;  $('#secondCategoryId').empty();  var s = '<option value="">请选择二级类别</option>';  $.each(list, function (index, item) {  if (item.id == secondCategoryId) {  s = s + '<option value="' + item.id + '" selected="selected">' + item.categoryName + '</option>';  } else {  s = s + '<option value="' + item.id + '">' + item.categoryName + '</option>';  }  });  $('#'+formId+' #secondCategoryId').html(s);  // 重新渲染，固定写法  form.render('select');  }  },  error: function (XMLHttpRequest) {  submit = false;  layer.alert("错误提示" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {icon: 0});  }  });  }  });
}

layui实现动态获取两级联动数据相关推荐

ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
完整绘制echarts地图并实现两级联动（区-乡镇）
本篇文章会记录如何完成地图两级联动,以及过程中遇到的一些问题,希望能帮到大家! 1.环境 <script src="https://s1.pstatp.com/cdn/expire- ...
bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
Android之两级联动点餐列表
文章目录前言一.效果图二.实现步骤 1.相关layout 2.相关adapter 3.自定义view 4.activity实现总结前言此功能为两个listview相互联动,左边listvi ...
【看板】ajax动态获取后台传来json数据，加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
sql 获取两个月内数据_如何在3个月的时间内自学成为数据分析师？
从一名0基础的用户运营自学成为数据分析师,我花了大半年的时间,但是抛开工作时间,系统性的学习只花了3个月. 这篇文章会从学习资源和学习路径两个方面分享我的自学经验,希望能对大家有所帮助. 先来说说有哪 ...
怎么给el-select两级联动赋值_医保改革：支付范围、支付标准、支付方式的联动，大有可为...
文 | 码万祺投稿邮箱:yiyao@yidu.sinanet.com◆ ◆ ◆提到医保支付改革,一般首先想到医保支付方式改革,比如火热进行的住院DRGs.DIP及门诊按人头付费.按绩效付费等.笔者 ...
安卓ListView选中后保持高亮状态，且两级联动带图标(升级版)
在项目开发过程中,遇到了使用listView需要让选中项保持高亮状态(即选中状态保持不变),且数据是二级联动.由于item点击过后瞬间颜色就会恢复原状,视觉上感觉没有选中,此demo中通过改变选中后i ...

layui实现动态获取两级联动数据

layui实现动态获取两级联动数据相关推荐

最新文章

热门文章