Question

我在MVC中有一个部分视图，其上有2个Razor下拉列表。

@Html.DropDownListFor(model => model.CustomerId, new SelectList(Model.CustomerList, "Id", "Name", @Model.CustomerId), 
new { @class = "bs-select form-control input-large", data_style = "btn-primary", id = "ddlCustomer", onchange = "reloadDdl()" })

和

@Html.DropDownListFor(model => model.BranchId, new SelectList(Model.BranchList, "Id", "Description", @Model.BranchId),
new { @class = "bs-select form-control input-large", data_style = "btn-primary", id = "ddlBranch" })

当第一个Dropdownlist选择发生更改时，第二个下拉列表会加载一组新选项。例如，如果客户下拉列表中有＆＃34; a＆＃34;如果选中，分支下拉列表将包含＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34;可供选择。如果您将客户下拉选项更改为＆＃34; b＆＃34;，分支下拉菜单将更改为＆＃34; 4＆＃34;，＆＃34; 5＆＃34;，＆＃34; 6＆＃34;。这是通过使用以下代码对我的控制器进行ajax调用来实现的：

function reloadDdl(){
    var customerId =  $("#ddlCustomer").val();

    $.ajax({
        url: '/Adjuster/RefreshAddEditView',
        data: { CustomerId: customerId },
        method: 'POST',
        success: function (result){
            var mySelect = $('#ddlBranch');
            mySelect.find('option').remove().end();
            for(var i = 0; i<result.branchList.length;i++){
                mySelect.append(
                    $('<option></option>').val(result.branchList[i]["Id"]).html(result.branchList[i]["Description"])
                );
            }
        }
    });
}

我遇到的问题是Razor下拉列表是一个普通的选择标记，其中包含选项：

<select class="bs-select form-control input-large" data-style="btn-primary" data-val="true" data-val-number="The field BranchId must be a number." data-val-required="The BranchId field is required." id="ddlBranch" name="BranchId">

但是当Bootstrap Javascript

时

ComponentsDropdowns.init();

应用了

，它变成了一个带有跨度和无序列表的按钮。

如果有人通过改变我重新填充下拉列表的方式知道解决方案，或者我如何解决Bootstrap问题，我将不胜感激。

Answer 1

你可以使用简单的jquery而不是像

那样进行ajax调用

$("#fotype").change(function () {

    if ($('#fotype').find(":selected").val() == 1) {
        $("#wd option[value='1']").show();
        $("#wd option[value='2']").hide();
        $("#wd option[value='3']").show();
        $("#wd option[value='4']").show();
        $("#wd option[value='5']").hide();
        $("#wd option[value='6']").show();
           }

Answer 2

通过更改我的ajax调用的成功结果，我能够按预期工作。现在看来是这样的：

function reloadDdl(){
        $.ajax({
        url: '/Adjuster/RefreshAddEditView',
        data: { CustomerId: $("#ddlCustomer").val() },
        method: 'POST',
        success: function (result){
            $("#BranchList").empty();
            $("#BranchList").append($('<select></select>').attr("id", "ddlBranch"))

            for(var i = 0; i < result.branchList.length;i++){
                $("#ddlBranch").append(
                    $('<option></option>').val(result.branchList[i]["Id"]).html(result.branchList[i]["Description"])
                );
            }
            $("#ddlBranch").addClass("bs-select").addClass("form-control").addClass("input-large").data("style", "btn-primary").attr("name", "BranchId").selectpicker();
        }
    });
}

我将Razor下拉包装在div中，如下所示：

<div id="BranchList">
@Html.DropDownListFor(model => model.BranchId, new SelectList(Model.BranchList, "Id", "Description", @Model.BranchId),
new { @class = "bs-select form-control input-large", data_style = "btn-primary", id = "ddlBranch" })
</div>

使用Bootstrap样式更改MVC4中的DropDownListFor数据

2 个答案: