ASP.NET WebForms三级DropDownList选中值丢失及控件异常求助

控件代码 #

产品下拉框 #

<asp:DropDownList id="slctproduct" runat="server" name="select" class="form-control form-control-primary"  onchange="selectcategory(); return false;"> </asp:DropDownList>

分类下拉框 #

<asp:DropDownList id="slctpartcategory" runat="server" class="form-control form-control-primary" onchange="selectpart(); return false;" ></asp:DropDownList>

零件下拉框 #

<asp:DropDownList id="slctpart" runat="server" name="select" class="form-control form-control-primary" ></asp:DropDownList>

当前联动代码 #

产品→分类 前端逻辑 #

function selectcategory() {
    var product = document.getElementById('<%= slctproduct.ClientID %>');
    // Fetch and populate part categories based on the selected product
    $.ajax({
        type: "POST",
        url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_PartCategoryForCN",
        data: "{ 'P': { 'RNI_FK_CN_PartCategory': '" + product.value + "' } }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var ddlProducts2 = $("[id*=slctpartcategory]");
            ddlProducts2.empty().append('<option selected="selected" value="-1">Select Part Category</option>');
            $.each(r.d, function () {
                ddlProducts2.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
    }); 
}

产品→分类 后端逻辑（C#） #

public static List<ListItem> RNI_Fetch_PartCategoryForCN(Properties P)
{
    using (cmd = new SqlCommand())
    {
        List<ListItem> type = new List<ListItem>();
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "sp_Fetch_PartcategoryForCN";
        cmd.Connection = Getconnected.getconnecting();
        cmd.Parameters.AddWithValue("@Product", P.RNI_FK_CN_PartCategory);
        //cmd.Parameters.AddWithValue("@category", P.RNI_FK_SelectedPartCategory); 
        using (sdr = cmd.ExecuteReader())
        {
            while (sdr.Read())
            {
                type.Add(new ListItem
                {
                    Value = sdr[0].ToString(),
                    Text = sdr[1].ToString()
                });
            }
        }
        return type;
    }
}

分类→零件 前端逻辑 #

function selectpart() {
    var partcategory = document.getElementById('<%= slctpartcategory.ClientID %>');
    // Check if any of the inputs are empty or null
    $.ajax({
        type: "POST",
        url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_Part",
        data: "{ 'P': { 'FK_Part': '" + partcategory.value + "' } }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var ddlProducts = $("[id*=slctpart]");
            ddlProducts.empty().append('<option selected="selected" value="-1">Select Part</option>');
            $.each(r.d, function () {
                ddlProducts.append($("<option></option>").val(this['Value']).html(this['Text']));
            });    
        }
    });
}

分类→零件 后端逻辑（C#） #

[WebMethod]
public static List<ListItem> RNI_Fetch_Part(Properties P)
{
    using (cmd = new SqlCommand())
    {
        List<ListItem> type = new List<ListItem>();
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "sp_Fetch_PartsfromCategory";
        cmd.Connection = Getconnected.getconnecting();
        cmd.Parameters.AddWithValue("@category", P.FK_Part);
        using (sdr = cmd.ExecuteReader())
        {
            while (sdr.Read())
            {
                type.Add(new ListItem
                {
                    Value = sdr[0].ToString(),
                    Text = sdr[1].ToString()
                });
            }
        }
        return type;
    }
}

问题原因与修复方案 #

核心原因 #

前端代码中使用的模糊选择器[id*=slctpart]会匹配所有ID包含"slctpart"字符串的控件，而分类下拉框的ID是slctpartcategory，恰好包含"slctpart"，导致调用selectpart()时，同时修改了零件下拉框和分类下拉框，把分类下拉框的选项替换成了零件选项，出现两个零件下拉框的异常。

修复步骤 #

将模糊选择器替换为精确匹配服务器控件ClientID的选择器，确保只操作目标下拉框：

修改后的「产品→分类」前端函数

function selectcategory() {
    var product = document.getElementById('<%= slctproduct.ClientID %>');
    // 精确获取分类下拉框
    var ddlCategory = $('#<%= slctpartcategory.ClientID %>');

    $.ajax({
        type: "POST",
        url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_PartCategoryForCN",
        data: "{ 'P': { 'RNI_FK_CN_PartCategory': '" + product.value + "' } }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            ddlCategory.empty().append('<option selected="selected" value="-1">Select Part Category</option>');
            $.each(r.d, function () {
                ddlCategory.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
    }); 
}

修改后的「分类→零件」前端函数

function selectpart() {
    var partcategory = document.getElementById('<%= slctpartcategory.ClientID %>');
    // 精确获取零件下拉框
    var ddlPart = $('#<%= slctpart.ClientID %>');

    $.ajax({
        type: "POST",
        url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_Part",
        data: "{ 'P': { 'FK_Part': '" + partcategory.value + "' } }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            ddlPart.empty().append('<option selected="selected" value="-1">Select Part</option>');
            $.each(r.d, function () {
                ddlPart.append($("<option></option>").val(this['Value']).html(this['Text']));
            });    
        }
    });
}

额外优化建议 #

• 可以提前缓存控件对象，避免每次调用函数时重复查找DOM元素
• 若需要保留分类下拉框的选中状态，在填充零件下拉框时不要对分类下拉框做任何修改（修复选择器后即可实现）

内容的提问来源于stack exchange，提问作者M Umer