jquery和ajax实现二级联动
结合layui实现二级联动案例,代码更改如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="#" id="form1">
<div class="layui-input-inline">
<select name="quiz3" id="sel" lay-filter="sel">
动态添加select的时候,一定要加一个默认的option,不然会报错
<option></option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3" id="sel2" lay-filter="sel2">
动态添加select的时候,一定要加一个默认的option,不然会报错
<option></option>
</select>
</div>
</form>
<script src="layui/layui.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
layui.use(['form', 'layedit', 'laydate', 'jquery', 'laytpl'], function () {
var form = layui.form(),
layer = layui.layer,
layedit = layui.layedit,
$ = layui.jquery,
laydate = layui.laydate;
//监听提交
var datas;
form.on('select(sel)', function(data){
// console.log(data.elem); //得到select原始DOM对象
// console.log(data.value); //得到被选中的值
datas=data.value;
loadDevice(datas);
console.log(datas);
function loadDevice(departmentId) {
$.ajax({
url: 'query?=' + departmentId,
type: 'POST',
dataType: 'JSON',
success: function (msg) {
// console.log(msg);
$.each(eval(msg), function (i, item) {
console.log(item);
$(
"<option value='" + item.id + "'>" + item.id + "</option>"+
"<option value='" + item.name + "'>" + item.name + "</option>"+
"<option value='" + item.phone + "'>" + item.phone + "</option>"
).appendTo($("#sel2"));
});
}
});
form.render('select');//一定要加form.render();
}
});
$.ajax({
url: 'user.json',
success: function (data) {
$.each(eval(data), function (i, item) {
// console.log(item);
$.each(item,function (i,item) {
console.log(item);
$(
"<option value='" + item.name + "'>" + item.name + "</option>" +
"<option value='" + item.id + "'>" + item.id + "</option>" +
"<option value='" + item.userSex + "'>" + item.userSex + "</option>"
).appendTo($("#sel"));
})
});
form.render('select');//一定要加form.render();
}
});
});
</script>
</body>
</html>
原demo如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1" action="search.action" method="post">
<select name="departmentId" id="departmentId"><option value="0">查询所有</option></select><br />
<select name="deviceId" id="deviceId"><option value="0">查询所有</option></select><br />
<img src="images/search.gif" onclick="sub()" />
</form>
<script type="text/javascript" src="jquery-2.2.4.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: "deJson.action",
type: 'POST',
dataType: 'JSON',
timeout: 5000,
//error: function() {alert('加载数据异常,请重试!');},
success: function(data) {
//$("#departmentId").empty();
$.each(eval(data), function(i, item) {
$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#departmentId"));
});
}
});
$("#departmentId").click(function() {
loadDevice($("#departmentId").val());
});
function loadDevice(departmentId) {
$.ajax({
url: 'dJson.action?departmentId='+ departmentId,
type: 'POST',
dataType: 'JSON',
timeout: 5000,
error: function() { alert('加载数据异常,请重试!'); },
success: function(msg) {
if(msg=="{[]}"){
$("#deviceId").empty();
$("<option value='0'>查询所有</option>").appendTo($("#deviceId"));
}else{
$("#deviceId").empty();
$("<option value='0'>查询所有</option>").appendTo($("#deviceId"));
$.each(eval(msg), function(i, item) {
$("<option value='" + item.deviceId + "'>" + item.name + "</option>").appendTo($("#deviceId"));
});
}
}
});
}
})
function sub(){
document.getElementById("inneralert").style.display="block";
$("#form1").submit();
}
</script>
</body>
</html>
##数据类型
[
{
"comboType": "INPUT",
"modelPropertyCode": "policyNo",
"name": "保单号"
},
{
"comboType": "MULTIPUT",
"modelPropertyCode": "departmentCode",
"name": "承保机构"
},
{
"comboType": "DATE",
"modelPropertyCode": "applyTime",
"name": "投保日期"
},
{
"comboType": "DATE",
"modelPropertyCode": "firstRegisterDate",
"name": "车辆初登日期"
},
{
"modelPropertyCode": "planCode",
"name": "保单类型"
},
{
"modelPropertyCode": "specialStr",
"name": "特别约定"
},
{
"modelPropertyCode": "channelSourceCode",
"name": "渠道来源"
},
{
"modelPropertyCode": "channelSourceDetailCode",
"name": "渠道来源细分"
},
{
"modelPropertyCode": "clientType",
"name": "客户类型"
},
{
"modelPropertyCode": "personalName",
"name": "被保人名称"
},
{
"modelPropertyCode": "vehicleSeat",
"name": "核定座位数"
},
{
"modelPropertyCode": "vehicleType",
"name": "车辆类型"
},
{
"modelPropertyCode": "autoModelChnName",
"name": "厂牌车型"
},
{
"modelPropertyCode": "usageAttributeCode",
"name": "使用(营运)性质"
},
{
"modelPropertyCode": "applicationBusinessType",
"name": "投保人个团属性"
},
{
"modelPropertyCode": "vehicleFrameNo",
"name": "车架号"
},
{
"modelPropertyCode": "endorsementTimes",
"name": "批改次数"
},
{
"modelPropertyCode": "endorseNo",
"name": "批单号"
},
{
"modelPropertyCode": "purcharsePrice",
"name": "新车购置价"
},
{
"modelPropertyCode": "lastCrashTimes",
"name": "上年出险次数"
},
{
"modelPropertyCode": "totalActualPremium",
"name": "商业险保费区间"
},
{
"modelPropertyCode": "insuranceBeginDate",
"name": "保险起期"
},
{
"modelPropertyCode": "insuranceEndDate",
"name": "保险止期"
},
{
"modelPropertyCode": "insuredAmount",
"name": "车损险保额"
},
{
"modelPropertyCode": "insuredAmount2",
"name": "三者险保额"
},
{
"modelPropertyCode": "lastPolicyNo",
"name": "上年保单号"
},
{
"modelPropertyCode": "coinsuranceMark",
"name": "共保标志"
},
{
"modelPropertyCode": "vehicleTonnages",
"name": "吨位数"
},
{
"modelPropertyCode": "clientReMark",
"name": "客户备注信息"
},
{
"modelPropertyCode": "rescueType",
"name": "救援类型"
},
{
"modelPropertyCode": "rescuePlace",
"name": "救援地点"
},
{
"modelPropertyCode": "rescueTarget",
"name": "救援目标"
},
{
"modelPropertyCode": "responsibilityBelong",
"name": "责任方"
},
{
"modelPropertyCode": "source",
"name": "数据来源"
},
{
"modelPropertyCode": "customFlag",
"name": "客户标识"
},
{
"modelPropertyCode": "province",
"name": "省份"
},
{
"modelPropertyCode": "city",
"name": "城市"
},
{
"modelPropertyCode": "area",
"name": "区域"
},
{
"modelPropertyCode": "projectItem",
"name": "项目"
}
]