显示隐藏 <div> 进行下拉选择时的部分

Question

我有一个下拉列表，当从中选择某项时，某些div需要隐藏或显示。 我为另一个下拉菜单工作，该下拉菜单基本上控制了页面的整个视图，但是我无法使该下拉菜单正常工作，并且代码几乎相同。 我尝试了很多不同的东西。

这是jQuery代码

$(document).ready(function () {

    $("#ChangeRequestType").focus();


    $("#ChangeRequestType").change(changeRequestDisplay);


    changeRequestDisplay();

});

更多代码：

function changeRequestDisplay() {

    var action = $("#ChangeRequestType").val();

    if (action == "N/A") {
        DisplayOnlyDefaultChangeMenu();

    }
    else if (action == "Description") {
        DisplayDescriptionChange();

    }
    else if (action == "Procurement Category") {
        DisplayProcurementCategoryChange();

    }
    else if (action == "NonStandard Conversions") {
        DisplayNonStandardChangeRequest();

    }
    else if (action == "Item Group") {
        DisplayItemGroupChange();

    }
    else if (action == "Extended Description") {
        DisplayExtDescriptionChange();

    }
    else if (action == "More") {
        DisplayMultipleChange();
    }

}

更多代码：

 function DisplayOnlyDefaultChangeMenu() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#ExtDescriptionRequest").hide("slow");
    $("#ItemGroupChange").hide("slow");

    $("#DescriptionRequest").hide("slow");
    $("#ProcurementCategoryRequest").hide("slow");
    $("#NonStandardConversionRequest").hide("slow");

}
function DisplayExtDescriptionChange() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#ExtDescriptionRequest").show("slow");
    $("#ItemGroupChange").hide("slow");

    $("#DescriptionRequest").hide("slow");
    $("#ProcurementCategoryRequest").hide("slow");
    $("#NonStandardConversionRequest").hide("slow");

}


function DisplayDescriptionChange() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#DescriptionRequest").show("slow");
    $("#ProcurementCategoryRequest").hide("slow");
    $("#NonStandardConversionRequest").hide("slow");
    $("#ExtDescriptionRequest").hide("slow");
    $("#ItemGroupChange").hide("slow");
}
function DisplayProcurementCategoryChange() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#DescriptionRequest").hide("slow");
    $("#ProcurementCategoryRequest").show("slow");
    $("#NonStandardConversionRequest").hide("slow");
    $("#ExtDescriptionRequest").hide("slow");
    $("#ItemGroupChange").hide("slow");
}
function DisplayNonStandardChangeRequest() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#DescriptionRequest").hide("slow");
    $("#ProcurementCategoryRequest").hide("slow");
    $("#NonStandardConversionRequest").show("slow");
    $("#ExtDescriptionRequest").hide("slow");
    $("#ItemGroupChange").hide("slow");
}
function DisplayItemGroupChange() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#DescriptionRequest").hide("slow");
    $("#ProcurementCategoryRequest").hide("slow");
    $("#NonStandardConversionRequest").hide("slow");
    $("#ExtDescriptionRequest").hide("slow");
    $("#ItemGroupChange").show("slow");
}
function DisplayMultipleChange() {

    $("tr").show();
    $("#salesSetups").hide("slow");
    $("#requiredInfo").show("slow");
    $("#purchaseBUTable").show("slow");
    $("#fullAndBasicSetup").hide("slow");
    $("#fullAndSalesSetup").hide("slow");
    $("#salesProcurementExtras").hide("slow");

    $("#changeRequests").show("slow");
    $("#DescriptionRequest").show("slow");
    $("#ProcurementCategoryRequest").show("slow");
    $("#NonStandardConversionRequest").show("slow");
    $("#ExtDescriptionRequest").show("slow");
    $("#ItemGroupChange").show("slow");
}

这是我尝试实现所有功能的地方

<div class="span-18 last" id="changeRequests">
  <table class="item-display">
    <tr>
      <td class="label required">Change Request Type</td>
      <td class="value" colspan="5">
        @Html.DropDownList("ChangeRequestType", new List<SelectListItem>
          {
            new SelectListItem { Text ="Select Option", Value="N/A"},
            new SelectListItem { Text ="Item Group", Value="Item Group" },
            new SelectListItem { Text ="Description", Value="Description" },
            new SelectListItem { Text ="Extended Description", Value="Extended Description" },
            new SelectListItem { Text ="Procurement Category", Value="Procurement Category" },
            new SelectListItem { Text ="NonStandard Conversion", Value="NonStandard Conversions" },
            new SelectListItem { Text ="More Than One Change Type", Value="More" },

          }, new { onchange = "changeRequestDisplay()"})
      </td>
    </tr>

我已经对部分的<div> id和下拉选择的值进行了两次和三次检查，如100000次，似乎没有问题，所以我似乎无法查明为什么它们都保留下来了隐藏，无论选择什么。

Answer 1

好吧，要获得选定的值，您应该使用

$("#ChangeRequestType option:selected").val();

它一定会解决您的问题

Answer 2

这行是问题所在：

$("tr").show();

尝试$("#ChangeRequestType").closest("tr")