bootstarp-select 級聯

$(document).ready(function () {
    $('select').removeAttr('multiple');
    $('select').addClass("selectpicker");
});

$("#MDID").on("changed.bs.select", function (e) {
    //清空下級菜單append的內容
    $('#BMDM4').empty();
    //清空下級菜單append的內容
    $('#BMDM8').empty();
    //刷新下級菜單,由於上級菜單改變因此清空下級的選項
    $('#BMDM8').selectpicker('refresh');
    //獲取門店的ID,門店列表直接經過asp控件生成
    var bmdm2 = $('#MDID').val();
    $.ajax({
        type: "post",
        async: false,
        url: "/Saler/bmdm4",
        data: { bmdm2: bmdm2 },
        datatype: "json",
        success: function (data) {
            var bmdm4 = data.bmdm4;
            $.each(bmdm4, function (i, n) {
                $("#BMDM4").append("<option value=" + bmdm4[i].Value + ">" + bmdm4[i].Text + "</option>");
            });
        }
    });
    $('#BMDM4').selectpicker('refresh');
});


$("#BMDM4").on("changed.bs.select", function (e) {
    //清空下級菜單append的內容
    $('#BMDM8').empty();
    var bmdm4 = $('#BMDM4').val();
    $.ajax({
        type: "post",
        async: false,
        url: "/Saler/bmdm8",
        data: { bmdm4: bmdm4 },
        datatype: "json",
        success: function (data) {
            var bmdm8 = data.bmdm8;
            $.each(bmdm8, function (i, n) {
                $("#BMDM8").append("<option value=" + bmdm8[i].Value + ">" + bmdm8[i].Text + "</option>");
            });
        }
    });
    //刷新下級菜單,顯示append的內容
    $('#BMDM8').selectpicker('refresh');
});

$(".btn").on("click", function (e) {
    $("#sss").submit();
});


$("#sss").on("submit", function (e) {
    if (null == $('#MDID').val()) {
        alert("門店不能爲空!");
        return false;
    }
    if (null == $('#BMDM4').val()) {
        alert("課室不能爲空!");
        return false;
    }
    if (null == $('#BMDM8').val()) {
        alert("專櫃不能爲空!");
        return false;
    }
});

後臺用SelectListItem傳值

public void bmdm2(String OriginalValue)
        {
            List<SelectListItem> bmdm2 = new List<SelectListItem>();
            db.v_sys_BMDM.GroupBy(s => new { s.MDID, s.DEPT_NAME2 }).ToList().ForEach(a => bmdm2.Add(new SelectListItem { Text = a.Key.MDID + " " + a.Key.DEPT_NAME2, Value = a.Key.MDID, Selected = (OriginalValue.Equals(a.Key.MDID)) }));
            ViewData["bmdm2"] = bmdm2;
        }

        public JsonResult bmdm4(String OriginalValue, String bmdm2)
        {
            //前臺沒有傳OriginalValue,致使OriginalValue可能會爲爆出空指針異常
            OriginalValue = String.IsNullOrEmpty(OriginalValue) ? String.Empty : OriginalValue;
            List<SelectListItem> bmdm4 = new List<SelectListItem>();
            db.v_sys_BMDM.Where(s => s.BMDM4.StartsWith(bmdm2)).GroupBy(s => new { s.BMDM4, s.DEPT_NAME4 }).ToList().ForEach(a => bmdm4.Add(new SelectListItem { Text = a.Key.BMDM4 + " " + a.Key.DEPT_NAME4, Value = a.Key.BMDM4, Selected = (OriginalValue.Equals(a.Key.BMDM4)) }));
            if (!Request.IsAjaxRequest())
                //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                //viewData名稱不能和model的字段重名
                //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                ViewData["dm4"] = bmdm4;
            return Json(new { bmdm4 });
        }

        public JsonResult bmdm8(String OriginalValue, String bmdm4)
        {
            //前臺沒有傳OriginalValue,致使OriginalValue可能會爲爆出空指針異常
            OriginalValue = String.IsNullOrEmpty(OriginalValue) ? String.Empty : OriginalValue;
            List<SelectListItem> bmdm8 = new List<SelectListItem>();
            db.v_sys_BMDM.Where(s => s.BMDM8.StartsWith(bmdm4)).GroupBy(s => new { s.BMDM8, s.DEPT_NAME8 }).ToList().ForEach(a => bmdm8.Add(new SelectListItem { Text = a.Key.BMDM8 + " " + a.Key.DEPT_NAME8, Value = a.Key.BMDM8, Selected = (OriginalValue.Equals(a.Key.BMDM8)) }));
            if (!Request.IsAjaxRequest())
                //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                //viewData名稱不能和model的字段重名
                //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                ViewData["dm8"] = bmdm8;
            return Json(new { bmdm8 });
        }

asp頁面取值

<div class="editor-label">
                <%: Html.LabelFor(model => model.MDID) %>
            </div>
            <div class="editor-field">
                <%--!!!!!!!!!!!!!!!!viewData名稱不能和model的字段重名!!!!!!!!!!!!!!!!!!!!!!!!!!!--%>
                <%:Html.DropDownListFor(model => model.MDID, ViewData["bmdm2"] as List<SelectListItem>,"沒有選中任何項")%>
                <%: Html.ValidationMessageFor(model => model.MDID) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.BMDM4) %>
            </div>
            <div class="editor-field">
                <%--!!!!!!!!!!!!!!!!viewData名稱不能和model的字段重名!!!!!!!!!!!!!!!!!!!!!!!!!!!--%>
                <%:Html.DropDownListFor(model=>model.BMDM4,ViewData["dm4"] as List<SelectListItem>) %>
                <%:Html.ValidationMessageFor(model => model.BMDM4) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.BMDM8) %>
            </div>
            <div class="editor-field">
                <%--!!!!!!!!!!!!!!!!viewData名稱不能和model的字段重名!!!!!!!!!!!!!!!!!!!!!!!!!!!--%>
                <%:Html.DropDownListFor(model=>model.BMDM8,ViewData["dm8"] as List<SelectListItem>) %>
                <%:Html.ValidationMessageFor(model => model.BMDM8) %>
            </div>