Html代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../Content/jquery-1.11.3.js"></script>
<title>测试联动下拉框</title>
</head>
<body>
<form id="form1" runat="server" class="layui-form">
<div class="layui-inline" style="margin-bottom: 15px;">
<label class="layui-form-label">部门：</label>
<div class="layui-input-inline" style="width: 150px">
<select name="buildId" id="buildId" lay-filter="buildingFilter" class="layui-input" lay-search="">
</select>
</div>
</div>
<div class="layui-inline" style="margin-bottom: 15px;">
<label class="layui-form-label">线体：</label>
<div class="layui-input-inline" style="width: 150px">
<select id="houseId" lay-verify="sadaS" lay-search>
</select>
</div>
</div>
</form>
<%--初始化内容 Start--%>
<script type="text/javascript">
//初始化内容 Start
$(function () {
myFunction();
});
//初始化内容 End
</script>
<%--初始化内容 End--%>
<%--车间/科室列表查询 Start--%>
<script type="text/javascript">
function myFunction() {
layui.use(['layer'], function () {
var $ = layui.jquery,
layer = layui.layer;
$.ajax({
type: "post",
url: "http://10.255.30.205:33509/cpam/organization/getWorkshopOrDeptNameList",//查询车间方法
//contentType: "application/json",
dataType: "json",
//beforeSend: function (request) {
// request.setRequestHeader('Token', tokenInfo);
//},
success: function (result) {
//返回数据格式：{"flag":0,"message":"无线体列表信息","dataList":null,"count":0,"entity":null}
//layer.alert("result" + JSON.stringify(result));
if (result.flag == 0) {
//layer.alert("清空下拉列表的值");
$("#buildId").empty();//清空下拉框的值
form.render("select");
}
else {
$("#buildId").empty();//清空下拉框的值
var data = JSON.stringify(result);
var ss = data;
var a = eval('(' + data + ')');
for (var j = 0; j < a.dataList.length; j++) {
//layer.alert("a.dataList[j].workshopName:" + a.dataList[j].workshopName);
$('#buildId').append(new Option(a.dataList[j].workshopName, a.dataList[j].workshopName));// 下拉菜单里添加元素
}
layui.form.render("select");//重新渲染 固定写法
}
},
//XMLHttpRequest对象为Ajax请求数据的载体，重中之重
error: function (XMLHttpRequest, textStatus, errorThrown) {
var status = XMLHttpRequest.status;
var readyState = XMLHttpRequest.readyState;
layer.msg("网络错误：status:" + status + "，readyState:" + readyState
+ "，textStatus:" + textStatus + ",errorThrown:" + errorThrown, {
icon: 5, anim: 6
});
}
});
});
}
</script>
<%--车间/科室列表查询 End--%>
<%--下拉框改变监听事件 Start--%>
<script type="text/javascript">
//下拉框改变监听事件 Start
layui.use(['form', 'layedit', 'laydate'], function () {
//alert("111");
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate;
//监听提交
form.on('select(buildingFilter)', function (data) {
//layer.alert("监听事件：" + JSON.stringify(data));
//返回的数据格式：{"elem":{"0":{},"1":{},"2":{},"3":{},"4":{},"5":{},"6":{},"7":{}},"value":"请选择2","othis":{"0":{},"length":1}}
//layer.alert(data.value);
//alert(data);
//console.log(data.data1); //得到select原始DOM对象
//console.log(data.value); //得到被选中的值
//console.log(data.othis); //得到美化后的DOM对象
//var htmls = '<option value="">请选择</option>'; //全局变量
//layer.alert("htmls:" + htmls);
//根据车间/科室列表查询线体列表 Start
$.ajax({
type: "post",
url: "http://10.255.30.205:33509/cpam/organization/getLineNameList/" + data.value + "",//查询车间方法
//contentType: "application/json",
dataType: "json",
//beforeSend: function (request) {
// request.setRequestHeader('Token', tokenInfo);
//},
success: function (result) {
//返回数据格式：{"flag":0,"message":"无线体列表信息","dataList":null,"count":0,"entity":null}
//layer.alert("result" + JSON.stringify(result));
if (result.flag == 0) {
//layer.alert("清空下拉列表的值");
$("#houseId").empty();//清空下拉框的值
form.render("select");
}
else {
$("#houseId").empty();//清空下拉框的值
var data = JSON.stringify(result);
var ss = data;
var a = eval('(' + data + ')');
for (var j = 0; j < a.dataList.length; j++) {
//layer.alert("a.dataList[j].lineName:" + a.dataList[j].lineName);
$('#houseId').append(new Option(a.dataList[j].lineName, a.dataList[j].lineName));// 下拉菜单里添加元素
}
layui.form.render("select");//重新渲染 固定写法
}
},
//XMLHttpRequest对象为Ajax请求数据的载体，重中之重
error: function (XMLHttpRequest, textStatus, errorThrown) {
var status = XMLHttpRequest.status;
var readyState = XMLHttpRequest.readyState;
layer.msg("网络错误：status:" + status + "，readyState:" + readyState
+ "，textStatus:" + textStatus + ",errorThrown:" + errorThrown, {
icon: 5, anim: 6
});
}
});
//根据车间/科室列表查询线体列表 End
});
});
//下拉框改变监听事件 End
</script>
<%--下拉框改变监听事件 End--%>
</body>
</html>
JSon代码如下：
车间/科室列表查询Json：
{
"flag": 1,
"message": "车间/科室列表获取成功",
"dataList": [
{
"workshopName": "总装一车间"
},
{
"workshopName": "2"
},
{
"workshopName": "品质检查科"
}
],
"count": 3,
"entity": null
}
根据车间/科室列表查询线体列表Json：示例是查询总装一车间
{
"flag": 1,
"message": "线体列表获取成功",
"dataList": [
{
"lineName": "4"
},
{
"lineName": "1"
},
{
"lineName": "2"
},
{
"lineName": "3"
},
{
"lineName": "888"
}
],
"count": 5,
"entity": null
}
来源：CSDN
作者：qq_16313575
链接：https://blog.csdn.net/qq_16313575/article/details/103963032