在模态中动态更新DropdownList

Question

我无法解决的问题是表单上有“添加项目”按钮。单击此按钮将打开一个包含两个下拉列表的模态窗口。第一个下拉列表预填充了一组项目，根据此选择，第二个下拉框理想地需要使用自己的一组项目进行更新。

这是第一个包含Type的下拉列表

<asp:DropDownList ID="DDLType" CssClass="form-control" runat="server" OnSelectedIndexChanged="LoadSubTypes" AutoPostBack="true">
    <asp:ListItem Value="Automobile">Automobile</asp:ListItem>
    <asp:ListItem Value="Aeroplane">Aeroplane</asp:ListItem>
    <asp:ListItem Value="Boat">Boat</asp:ListItem>
</asp:DropDownList>

这是第二个下拉列表，在从第一个下拉列表中进行选择之前，该列表当前处于空白状态。

<asp:DropDownList ID="DDLSubType" CssClass="form-control" runat="server">
</asp:DropDownList>

对于第一个有OnSelectedIndexChange的DDL，这就是后面的代码。

protected void LoadSubTypes(object sender, EventArgs e) {
    string strSubTypeList = "";
    switch (DDLType.SelectedValue)
    {
        case "Automobile":
            strSubTypeList = "Car#Motorbike#Scooter";
            break;
        case "Aeroplane":
            strSubTypeList = "Commercial#Private";
            break;
        case "Boat":
            strSubTypeList = "Boat#Jetski";
            break;
    }

    StringBuilder sbSubTypes = new StringBuilder();
    Char delimiter = '#';
    String[] substrings = strSubTypeList.Split(delimiter);
    foreach (var substring in substrings)
    {
        DDLSubType.DataTextField = substring;
        DDLSubType.DataValueField = substring;
        DDLSubType.DataBind();
    } }

通常这种类型的设置对我来说很有效，但这次唯一的区别是我将它们加载到Modal中。当我从DDL中进行选择时会发生什么情况是模态关闭并导致回发。这将重置随后动态更改的任何值。

我在这里的理想行为是，当在第一个DDL上进行选择时，第二个DDL会在模态中更新而不会关闭。

任何帮助将不胜感激！

Answer 1

我想你是说当我从下拉列表中选择一个项目时，它的相关选项将显示在下一个下拉列表中。你将不得不使用jquery ajax（它会更容易）。从下拉列表中选择某个项目时，其值将使用ajax传递，这将在不刷新页面的情况下获取您的下拉列表。例如

<select class="form-control" id="Departments" ><option value="">-Select Department-</option>
    <option value="17">No Department</option>
    <option value="19">Men</option>
    <option value="1018">Danial</option>
    </select>

JavaScript与jquery：

$("#Departments").change(function () {
    var deptId = $(this).select("option:selected").val();

    $.ajax(
    {
        url: "/Categories/M_Level2/" + deptId
    }).done(function (categories) 
{
    $("#category").html(categories);                             
});

在url中，Categories是控制器，M_Level2是获取值deptId的动作，并在此基础上返回PartialView，然后在#category上添加它