实现三级联动
2019-07-11 本文已影响0人
领带衬有黄金
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>级联</title>
<link rel="stylesheet" href="/static/css/layui.css" media="all">
<script src="/static/backweb/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<style>
.layui-form-select dl {
max-height: 185px !important;
}
.layui-form-select dl dd.layui-this {
background: #000000;
}
#submit {
background-color: #0C0C0C;
margin-top: 50px;
margin-left: 150px;
}
.layui-form-select .layui-input {
margin-left: 30px;
margin-top: 15px;
}
</style>
</head>
<body>
<form class="layui-form">
<div class="layui-form-item">
{#一级#}
<div class="layui-input-inline" id="one">
<select name="one_data" id="one_data" lay-verify="required" lay-filter="one" lay-search="">
</select>
<script src="/static/js/db/district.js"></script>
</div>
{#二级#}
<div class="layui-input-inline" id="two">
<select name="two_data" id="two_data" lay-filter="two"
lay-search=""></select>
</div>
{#三级#}
<div class="layui-input-inline" id="three">
<select name="three_data" id="three_data" lay-filter="three"
lay-search=""></select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="submit" class="layui-btn" lay-filter="district" lay-submit="">立即提交</button>
</div>
</div>
</form>
<script>
cascade();
</script>
</body>
</html>
JS 代码：
$.ajaxSettings.async = false;
$.get('/bigdata/district_1/', function (data) {
$('#one_data').html('<option value="">请选择</option>')
for (i in data.data) {
$('#one_data').append(new Option(data.data[i], data.data[i]));
}
});
$.ajaxSettings.async = true;
function cascade() {
layui.use('form', function () {
var form = layui.form;
var $ = layui.$
var one_data = "";
$('#two').hide();
$('#three').hide();
layui.form.on('select(one)', function (data) {
$('#three').hide();
$.ajaxSettings.async = false;
one_data = data.value
$.get('/bigdata/district_2/?one_data=' + data.value, function (data) {
if (data.msg != 'no data') {
$('#two').show();
$('#two_data').html('<option value="">请选择</option>')
for (i in data.data) {
$('#two_data').append(new Option(data.data[i], data.data[i]));
}
}
});
$.ajaxSettings.async = true;
if (data.value == "") {
$('#two').hide();
$('#three').hide();
}
layui.form.render("select");
});
layui.form.on('select(two)', function (data) {
$('#three').show();
$('#three_data').html('<option value="">请选择</option>')
$.ajaxSettings.async = false;
$.get('/bigdata/district_3/?one_data=' + one_data + '&two_data=' + data.value, function (data) {
if (data.data == 'no data') {
$('#three').hide();
} else {
for (i in data.data) {
$('#three_data').append(new Option(data.data[i], data.data[i]));
}
}
});
$.ajaxSettings.async = true;
if (data.value == "") {
$('#three').hide();
}
layui.form.render("select");
});
//监听提交
form.on('submit(district)', function (data) {
console.log(1)
console.log(data.field); //获取表单数据，以键值对的形式{key:value,key:value}
//发异步，把数据提交给ajax
$.post('/bigdata/get_country_data/', data.field, function (data) {
if (data.code == 200) {
console.log(data)
}
});
return false;
});
});
}
