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