如何在jQuery中插入Razor下拉列表？代码失效问题排查

我需要实现：当用户选择reportType下拉框的TESTING选项时，显示包含ZONE、STATE、COUNTRY三个下拉框的行；选择其他选项时隐藏该行。但当前代码无法正常生效，选中TESTING时目标行不显示。

现有代码片段 #

区域选择行的Razor渲染代码 #

@if (ViewBag.ReportType == "TESTING")
{   
    <tr id="row_test">
    <td>ZONE :</td><td> @Html.DropDownList("zone", (IEnumerable<SelectListItem>)ViewBag.zone, new { style = "width:350px"})</td>
    <td>STATE :</td><td> @Html.DropDownList("state", (IEnumerable<SelectListItem>)ViewBag.state, new { style = "width:350px"})</td>
    <td>COUNTRY:</td><td> @Html.DropDownList("country", (IEnumerable<SelectListItem>)ViewBag.country, new { style = "width:350px"})</td>
    </tr>
}

reportType下拉框代码 #

<div style="height:850px">
<section class="container">
    <table style="width:850px;">
        <tr id="filter_section">
            <td style="width:120px">REPORT :</td> 
            <td> @Html.DropDownList("reportType", (IEnumerable<SelectListItem>)ViewBag.ReportType, new { style = "width:350px" })</td>
         </tr>

当前无效的jQuery代码 #

$("#reportType").change(function () {
    if ($(this).val() == "TESTING") {
        var testRow = $("#reportType").append($('#row_test').clone()); //此处存在问题，无法正常工作
        $(testRow).insertAfter("#filter_section");
        $("#zone").focus();
        $("#state").focus();
        $("#country").focus();
    } else {
        $("#row_test").remove();
    }
});

问题根源 #

1. Razor逻辑错误：只有当ViewBag.ReportType初始值为TESTING时，row_test才会被渲染到DOM中。如果页面加载时默认选中的不是TESTING，后续jQuery根本找不到这个元素，自然无法克隆显示。
2. jQuery操作错误：$("#reportType").append(...)是把克隆的行插入到下拉框内部，违反HTML结构规范，而且后续insertAfter操作对象错误，导致元素无法正确显示在表格里。

修复方案 #

1. 调整Razor代码，始终渲染区域行并默认隐藏 #

把条件渲染改为始终渲染，用CSS默认隐藏该行，确保DOM中一直存在这个元素：

<tr id="row_test" style="display:none;">
<td>ZONE :</td><td> @Html.DropDownList("zone", (IEnumerable<SelectListItem>)ViewBag.zone, new { style = "width:350px"})</td>
<td>STATE :</td><td> @Html.DropDownList("state", (IEnumerable<SelectListItem>)ViewBag.state, new { style = "width:350px"})</td>
<td>COUNTRY:</td><td> @Html.DropDownList("country", (IEnumerable<SelectListItem>)ViewBag.country, new { style = "width:350px"})</td>
</tr>

2. 修正jQuery代码，控制行的显示/隐藏 #

不需要克隆元素，直接通过show()/hide()控制现有行的状态：

$("#reportType").change(function () {
    const selectedVal = $(this).val();
    const testRow = $("#row_test");
    
    if (selectedVal === "TESTING") {
        testRow.show();
        $("#zone").focus(); // 可选：自动聚焦第一个下拉框
    } else {
        testRow.hide();
    }
});

3. 可选：页面加载时初始化状态 #

如果需要页面加载完成后，立即根据初始选中的reportType显示/隐藏行，添加初始化代码：

$(document).ready(function() {
    $("#reportType").trigger("change");
});

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