如何在 jquery 中插入剃刀下拉列表？答案

【问题标题】：how to insert razor dropdown list in jquery?如何在 jquery 中插入剃刀下拉列表？
【发布时间】：2022-08-16 10:26:02
【问题描述】：

@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\").change(function () {
            if ($(this).val() == \"TESTING\") {
                var testRow = $(\"#reportType\").append($(\'#row_test\').clone()); //this part here is the problem, its not working
                $(testRow).insertAfter(\"#filter_section\");
                $(\"#zone\").focus();
                $(\"#state\").focus();
                $(\"#country\").focus();
            } else {
                $(\"#row_test\").remove();
            }
        });

为什么这不起作用？如果用户单击的值是 TESTING，则应该显示该行。但是它没有出现。

#Edit 1：添加reportType以进一步澄清

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

报告类型的目的是当用户单击报告类型的下拉列表并单击 TESTING 时，应该会出现另外三个下拉列表，分别是区域、州和国家

你调试过代码吗？您在浏览器控制台中看到任何错误吗？
不，没有错误
我用document.getElementById(\"reportType\").innerHTML测试，html代码被添加到reportType。你想得到什么？为什么你需要在下拉列表中添加<tr></tr>？你能分享你的reportType和filter_section吗？
好的分享，我解释了一些我想做的事情
appear that is of zone, state and country，你的js看起来你想将三个下拉列表添加到reportTypedropdown？我认为你应该将下拉列表添加到其他地方。

标签： c# jquery asp.net-core visual-studio-2010 razor

【解决方案1】：

它实际上用更少的代码更简单，显示和隐藏功能是让它工作的功能，附在下面：

 $("#reportType").change(function () {
            if ($(this).val() == "TESTING") {
                $('#row_test').show();
            } else {
                $("#row_test").hide();
            }
        });

【讨论】：