C#使用layui三级联动下拉框框
html前端代码
<div class="layui-form-item">
<label class="layui-form-label">联动选择框:</label>
<div class="layui-input-inline">
<select name="quiz1" id="quiz1" lay-filter="quiz1" >
<option value="">请选择一级</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2" id="quiz2" lay-filter="quiz2">
<option value="">请选择二级</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3" id="quiz3" lay-filter="quiz3">
<option value="">请选择三级</option>
</select>
</div>
</div>
Js前端代码
var LevelOne = "";
var levelTwo = "";
var levelThree = "";
$.post("/GoodsClassification/queryByParentId", { "Hierarchy":1 }, function (data) {
var data = eval('(' + data + ')');
if (data.msg != "success") {
layer.msg(data.data)
} else {
var $html = "";
if (data.data != null) {
$.each(data.data, function (index, data) {
if (data.title != "" && data.id != "")
{
$html += "<option value='" + data.id + "'>" + data.title + "</option>";
}
});
$("#quiz1").append($html);
form.render('select');
}
}
});
form.on('select(quiz1)', function (dataObj) {
$("#quiz2").empty();
var quiz2Html = '<option value="">请选择二级</option>';
$("#quiz2").html(quiz2Html);
var quiz3Html = '<option value="">请选择三级</option>';
$("#quiz3").html(quiz3Html);
LevelOne = $("#quiz1").find("option:selected").text();
var value = $("#quiz1").val();
$.post("/GoodsClassification/queryByParentId", { "Hierarchy":2,"Parentid": value }, function (data) {
var data = eval('(' + data + ')');
if (data.msg != "success") {
layer.msg(data.data)
} else {
var $html = "";
if (data.data != null) {
$.each(data.data, function (index, data) {
if (data.title != "" && data.id != "") {
$html += "<option value='" + data.id + "'>" + data.title + "</option>";
}
});
$("#quiz2").append($html);
form.render('select');
}
}
});
});
form.on('select(quiz2)', function (dataObj) {
$("#quiz3").empty();
var html = '<option value="">请选择三级</option>';
$("#quiz3").html(html);
levelTwo = $("#quiz2").find("option:selected").text();
var value = $("#quiz2").val();
$.post("/GoodsClassification/queryByParentId", { "Hierarchy":3,"Parentid": value }, function (data) {
var data = eval('(' + data + ')');
if (data.msg != "success") {
layer.msg(data.data)
} else {
var $html = "";
if (data.data != null) {
$.each(data.data, function (index, data) {
if (data.title != "" && data.id != "") {
$html += "<option value='" + data.id + "'>" + data.title + "</option>";
}
});
$("#quiz3").append($html);
form.render('select');
}
}
});
});
form.on('select(quiz3)', function (dataObj) {
levelThree = $("#quiz3").find("option:selected").text();
});
C#后端代码
public string queryByParentId(string Hierarchy="1", string Parentid = "")
{
string strdata = "";
B_GoodsClassification b_Goods = new B_GoodsClassification();
List<GoodsClassificationTreeDto> goodsTYPE=b_Goods.queryByParentId(Hierarchy, Parentid);
if(goodsTYPE.Count>0)
{
strdata = JsonConvert.SerializeObject(goodsTYPE);
}
if (!string.IsNullOrWhiteSpace(strdata))
{
var resObj = new DH_LayuiResponse<GoodsClassificationTreeDto>()
{
code = 1,
msg = "success",
count = goodsTYPE.Count,
data = goodsTYPE
};
return JsonConvert.SerializeObject(resObj);
}
else
{
return "数据初始化失败!";
}
}
public List<GoodsClassificationTreeDto> queryByParentId(string Hierarchy="1", string Parentid="")
{
var goodsInfo=(from c in wc.classification_info
join gc in wc.goods_classification_info
on c.id.ToString() equals gc.classificationid
into gc
from m in gc.DefaultIfEmpty()
join g in wc.goods_info
on m.goodsid equals g.goodsid.ToString()
into g
from n in g.DefaultIfEmpty()
where c.is_delete.Equals(0) && c.specification_type == int.Parse(Hierarchy)
select new GoodsClassificationTreeDto()
{
title = c.classification_name,
id = c.id.ToString(),
parentid = c.parentid,
specificationType = c.specification_type.HasValue ? c.specification_type.Value : -1,
spread = false
}).Distinct().ToList();
if (!string.IsNullOrWhiteSpace(Parentid))
{
return goodsInfo.Where(a => a.title!="" && a.parentid.Equals(Parentid)).ToList();
}else
{
return goodsInfo;
}
}
效果图