Click here to Skip to main content
15,880,469 members
Search within:


How to show dropdown selection depending on another dropdown?
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Javascript
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
Add a Solution

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.


 
Share this answer
 
Posted
Updated 13-May-21 1:37am
v2
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Using one dropdown show the options in another dropdown from database collection in reactjs
I want to show country dropdown and state dropdown based on selected country and show city dropdown based on selected country and state
How to show dropdown depending another dropdown in javascript?
Dependent dropdown list laravel with ajax
How to show and hide table column based on the dropdown selection
displaying column depends on dropdown's selection of another column in sharepoint form
How to populate dropdown value in ASP depending upon selection of another dropdown value?
How to make form feild dropdown hide/show using jquery and javascript in HTML
PHP/mysql dynamic dependent dropdown
Auto change value after dropdown selected in C#

Advertise
Privacy
Cookies
Terms of Use
Last Updated 13 May 2021
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web02 2.8:2024-04-02:1

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