Click here to Skip to main content
15,029,010 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have two dropdown boxes. Depending on the first dropdown selection the second will show the selection that is needed.

Example: If the first dropdown selection is 4 and second will have the selection of 2+2 or 3+1.

dropdownVar00 is the first dropdown

LLAdropdownVar008 is the second dropdown

JavaScript
$("#dropdownVar002").setOnchange(function(newVal,oldVal){
  console.log(newVal).css("display", "none");
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1A]").prop("disabled", true).css("display", "initial");
  
    $("#LLAdropdownVar008").find("option[value=A2A]").prop("disabled", "true").css("display", "initial");
  
    $("#LLAdropdownVar008").find("option[value=A3A]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A4A]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A5A]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A1B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1E]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2E]").prop("disabled", "disabled").css("display", "block");
  
  }
  
  else if (newVal=="A2"){
    $("#LLAdropdownVar008").find("option[value=A1A]").prop("disabled", disabled).css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A2A]").prop("disabled", "disabled").css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A3A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A4A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A5A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1B]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A2B]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A3B]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A1C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1E]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2E]").prop("disabled", "disabled").css("display", "block");
	
  }
  
  else if (newVal=="A3"){
    $("#LLAdropdownVar008").find("option[value=A1A]").prop("disabled", disabled).css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A2A]").prop("disabled", "disabled").css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A3A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A4A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A5A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1C]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A2C]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A3C]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A1D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1E]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2E]").prop("disabled", "disabled").css("display", "block");
	
  }
  
  else if (newVal=="A4"){
    $("#LLAdropdownVar008").find("option[value=A1A]").prop("disabled", disabled).css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A2A]").prop("disabled", "disabled").css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A3A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A4A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A5A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1D]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A2D]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A3D]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A1E]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2E]").prop("disabled", "disabled").css("display", "block");
	
	}
	
	else if (newVal=="A5"){
    $("#LLAdropdownVar008").find("option[value=A1A]").prop("disabled", disabled).css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A2A]").prop("disabled", "disabled").css("display", "block");
  
    $("#LLAdropdownVar008").find("option[value=A3A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A4A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A5A]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3B]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3C]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A2D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A3D]").prop("disabled", "disabled").css("display", "block");
    
    $("#LLAdropdownVar008").find("option[value=A1E]").prop("disabled", "true").css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A2E]").prop("disabled", "true").css("display", "initial");


THe code I have tried does not fire. What am I missing?

What I have tried:

JavaScript
$("#dropdownVar007").setOnchange(function(newVal,oldVal){
  console.log(newVal);
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=Activity IA]").prop("disabled", false).css("display", "initial");
  
    $("#LLAdropdownVar008").find("option[value=Activity IB]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=Activity IC]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity ID]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IE]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIA]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIB]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIC]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIIA]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIIB]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IIIC]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IVA]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IVB]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity IVC]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity VA]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=Activity VB]").prop("disabled", "disabled").css("display", "none");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A2]").prop("disabled", false).css("display", "initial");
  
    $("#LLAdropdownVar008").find("option[value=A3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A4]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A5]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").prop("disabled", "disabled").css("display", "none");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A2]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A3]").prop("disabled", false).css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A4]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A5]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").prop("disabled", "disabled").css("display", "none");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A2]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A4]").prop("disabled", false).css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=A5]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").prop("disabled", "disabled").css("display", "none");
    
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A2]").prop("disabled", "disabled").css("display", "none");
  
    $("#LLAdropdownVar008").find("option[value=A3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A4]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=A5]").prop("disabled", false).css("display", "initial");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").prop("disabled", "disabled").css("display", "none");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").prop("disabled", "disabled").css("display", "none");
     
  }
})
Posted
Updated 13-May-21 1:36am

1 solution

What you have is not javaScript - it's jQuery. Here's the logic you should use.

If you wish it be jQuery or javascript or whatever, the following logic works.

SETUP
- Populate your parent list. It should have an onchange event.
- have a list of possible child options and some method to associate them with parent selection.
- Set up the initial content of the child list so that it corresponds to what is in the parent (if parent is blank, you need to decide if child is full of all or none.

EXECUTION OF "ONCHANGE"
- when the parent's oncchange event is triggered your function should use it's value to select from a list of options that satisfy the parent's selection (you don't have to limit the list to one).
- Use the values to build a string of option/value elements that match.
- using the id of the the child select list set the innerHTML value of the child to the formatted list of options you build.

I have a similar parent-child relationship but it's data-base driven and allows what are known as many-to-many relationships in both directions: a child can have multiple parents and a parent can have multiple children. It also cascades so a parent can have grandchildren and they, too, children, recursively.


   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900