how to insert razor dropdown list in jquery?-CodePudding

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

This is the razor code I would like to enter in here

$("#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();
            }
        });

why is this not working? the row is supposed to appear if the value clicked by the user is TESTING. however it does not appear.

#Edit 1: adding reportType for further clarification

<div style="height:850px">
<section >
    <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>

The purpose of the report type is to when the user clicks the dropdown list of the report type and clicks TESTING, three more dropdown lists is supposed to appear that is of zone, state and country

CodePudding user response：

It was actually much simpler with less code, the show and hide function was the one that made it work, attached below:

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