dimanche 26 juin 2016

Show/Hide <div> section when drop down selection is made

I have a drop down list and when something is selected from it, certain div's need to hide or show. I have this working for another drop down that basically controls the entire view of the page, but I can't get this drop to work and the code is almost identical. I have tried many different things.

Here is the JQuery Code

$(document).ready(function () {

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


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


    changeRequestDisplay();

});

More Code for it:

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

}

More Code for it:

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

Here is where I try and implement it all

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

I have double and triple checked the <div> id's for the sections and the values for the drop down selection like 100000 times and there doesn't seem to be a problem so I can not seem to pinpoint the issue as to why they all remain hidden no matter what is selected.

Aucun commentaire:

Enregistrer un commentaire