Question

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

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

<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>

第一个DDL中有一个OnSelectedIndexChange，这是后面的代码。

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>

带有jquery的JavaScript：

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

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

在url中，类别是控制器，而M_Level2是获取值 deptId 的操作，并在此基础上返回PartialView，然后将其添加到 #category

在模式

1 个答案: