关于商品大中小类三级联动

 

 

//html

<div class="row">
<div class="col-md-3">
<span class="prefix">大类</span>
<div class="btn-group">
@Html.DropDownList("GCategoryId", ViewBag.GCCategories as IEnumerable<SelectListItem>, "请选择", new { @style = "width:170px", @id = "bigClass" })
</div>
</div>
<div class="col-md-3">
<span class="prefix">中类</span>
<div class="btn-group">
@Html.DropDownList("FCategoryId", new List<SelectListItem>() as IEnumerable<SelectListItem>, "请选择", new { @style = "width:170px", @id = "inClass" })
</div>
</div>
<div class="col-md-3">
<span class="prefix">小类</span>
<div class="btn-group">
@Html.DropDownList("CategoryId", new List<SelectListItem>() as IEnumerable<SelectListItem>, "请选择", new { @style = "width:170px", @id = "smallClass" })
</div>
</div>

</div>

 

 

//js

$(document).ready(function (e) {
$("#bigClass").change(function () {
zl();//重新加载中类
//xl();//重新加载小类
})
$("#inClass").change(function () {
xl();//加载小类数据
})
});
function zl() {
//根据父级代号
//取父级代号
var pcode = $("#bigClass").val();
$("#inClass").empty();
$("#smallClass").empty();
//根据父级代号查数据
$.ajax({
async: false,
url: urlDictionary.GetCategoryByParent,
data: { parentId: pcode },
type: "POST",
dataType: "JSON",
success: function (data) {
var str = "";
str = str + "<option value = ''>请选择</optiom>";//获取大类之后中类要显示“请选择”
for (var sj in data) {
str = str + "<option value = '" + data[sj].Value + "'>" + data[sj].Text + "</optiom>";
}
$("#inClass").html(str);
}
});
}

function xl() {
var id = $("#inClass").val();
$("#smallClass").empty();
$.ajax({
async: false,
type: "POST",
url: urlDictionary.GetCategoryByParent,
dataType: "JSON",
data: { parentId: id },
success: function (data) {
var str = "";
str = str + "<option value = ''>请选择</optiom>";//获取中类之后小类要显示“请选择”
for (var sj in data) {
str = str + "<option value = '" + data[sj].Value + "'>" + data[sj].Text + "</optiom>";
}
$("#smallClass").html(str);
},
});
}

转载于:https://www.cnblogs.com/fuxun/p/8427776.html