select 三级联动

分享 未结 3 550
三块两毛四
悬赏:20飞吻
需求描述:三级联动saveOrUpdate

解决方案代码事例:

静态页面
 <div class="layui-form-item">
<label class="layui-form-label">所属分类</label>
<div class="layui-input-inline">
<select class="select" name="product.categoryOne" id="drpprovince" lay-filter="drpprovince"></select>
</div>
<div class="layui-input-inline">
<select id="drpcity" name="product.categoryTwo" class="select" lay-filter="drpcity"></select>
</div>
<div class="layui-input-inline">
<select id="drparea" name="product.categoryThree" class="select" lay-filter="drparea"></select>
</div>
</div>
select监听事件
form.on('select(drpprovince)', function (data) {
var proid = data.value;
$('#drpcity').html("");
$('#drparea').html("");
$.ajax({
url: '/category/getCategoryByPid?pid=' + proid,//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (i, item) {
if (i == 0) {
$.ajax({
url: '/category/getCategoryByPid?pid=' + item.id,//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (j, item) {
$('#drparea').append('<option value=' + item.id + '>' + item.name + '</option>');
})
}
})
}

$('#drpcity').append('<option value=' + item.id + '>' + item.name + '</option>');

})
}
})
form.render();
});


form.on('select(drpcity)', function (data) {
var cityid = data.value;
$('#drparea').html("");
$.ajax({
url: '/category/getCategoryByPid?pid=' + cityid,//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (i, item) {
$('#drparea').append('<option value=' + item.id + '>' + item.name + '</option>');
})
}
})
form.render();
});
异步加载数据

 layui.use(['form'], function () {
var $ = layui.jquery,
form = layui.form
, layer = layui.layer;
//
// 城市联动
var proid = 0;

$.ajax({
url: '/category/getCategoryByType?type=1',//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (i, item) {
if ('' != $('#categoryOne').val() && $('#categoryOne').val() == item.id) {
proid = item.id;
}
$('#drpprovince').append('<option value=' + item.id + '>' + item.name + '</option>');
})
$.ajax({
url: '/category/getCategoryByPid?pid=' + proid,//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (j, itemj) {
if ("" != $('#categoryTwo').val() && $('#categoryTwo').val() == itemj.id) {
$.ajax({
url: '/category/getCategoryByPid?pid=' + itemj.id,//带参数将这个传到后台条件查询方法里面
type: "post",
dataType: "json",
contentType: "application/json",
async: false,//同步
success: function (result) {
$.each(result.data, function (k, itemk) {
$('#drparea').append('<option value=' + itemk.id + '>' + itemk.name + '</option>');
})
}
}
)
}
$('#drpcity').append('<option value=' + itemj.id + '>' + itemj.name + '</option>');
})
}
})
}
})
$("#drpprovince").find("option[value='"+$('#categoryOne').val()+"']").prop("selected",true);
$("#drpcity").find("option[value='"+$('#categoryTwo').val()+"']").prop("selected",true);
$("#drparea").find("option[value='"+$('#categoryThree').val()+"']").prop("selected",true);
form.render();
})
}
回帖
  • 小老妹儿,你刚才发啥了?我都看见了
    0 回复
  • [good] [good]
    0 回复
  • 你好,正常情况下我的级联select是正确的,但是在layer.open(type=1)的弹出层中级联菜单不能正确的form.render,只有在下一次打开(layer.open)时,才加载上一次填充的数据,请问这个需要怎么做呢
    0 回复