html文件
<div class="layui-form">
<div class="layui-input-inline">
<select lay-filter="platform" >
<option value="0">全部</option>
<#if marketList?exists && marketList?size gt 0 >
<#list marketList as it>
<option value="${(it.id?c)!0}">${it.alias}</option>
</#list>
</#if>
</select>
</div>
<div class="layui-input-inline">
<select id="first" lay-filter="categoryId" >
<option value="0">全部</option>
<#if marketList1?exists && marketList1?size gt 0 >
<#list marketList as it>
<option value="${it.id}">${it.alias}</option>
</#list>
</#if>
</select>
</div>
</div>
js文件
<script>
layui.use('form', function () {
var form = layui.form;
//监听select选择事件
form.on('select(platform)', function(data){
var categoryId=data.value;
$.ajax({
type : "GET",
url : "/user/serproduct/listChildCategoryById",
data : {categoryId:categoryId},
success : function(ev)
{
$("#first").empty();
$("#first").prepend("<option value='0'>请选择</option>");//添加第一个option值
for (var i = 0; i < ev.marketList2.length; i++) {
alert(ev.marketList2[i].alias);
//如果在select中传递其他参数,可以在option 的value属性中添加参数
$("#first").append("<option value='"+ev.marketList2[i].id+"'>"+ev.marketList2[i].alias+"</option>");
}
//这句话必加,不加不显示新增的option
form.render();
},error:function(){
alert("获取数据失败","error");
}
});
});
});
</script>
获取第二个下拉框数据的后台文件
@RequestMapping(value = "listChildCategoryById",method = RequestMethod.GET)
@ResponseBody
public Map listChildCategoryById(@RequestParam(value = "categoryId", required = false,defaultValue = "0") Long categoryId){
Map map=new HashMap();
//Market是一个实体类
List<Market> marketList=marketService.listChildCategoryById(6,categoryId);
map.put("marketList2", marketList);
return map;
}