Click here to Skip to main content
14,935,153 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,

I have two dropdown boxes. The first dropdown has 5 options you can choose from. Depending on the option you chose, the 2nd dropdown will populate other options. What I have been getting is that all the options are still showing in the 2nd dropdown no matter what I choose. What did I do wrong and hat did I miss?

My Keys for DropdownVar007 are A1 - A5

My Keys for LAAdropdownVar008 are ACA1 - ACA5 an SSO1 - SSO3

What I have tried:

JavaScript
$("#dropdownVar007").setOnchange(function(newVal,oldVal){
  console.log(newVal);
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=ACA1]").attr("disabled", false);
  
    $("#LLAdropdownVar008").find("option[value=ACA2]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=ACA3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=ACA4]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=ACA5]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").attr("disabled", "disabled");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A2]").attr("disabled", false);
  
    $("#LLAdropdownVar008").find("option[value=A3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A4]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A5]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").attr("disabled", "disabled");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A2]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A3]").attr("disabled", false);
    
    $("#LLAdropdownVar008").find("option[value=A4]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A5]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").attr("disabled", "disabled");
  
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A2]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A4]").attr("disabled", false);
    
    $("#LLAdropdownVar008").find("option[value=A5]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").attr("disabled", "disabled");
    
  }
  
  if (newVal=="A1"){
    $("#LLAdropdownVar008").find("option[value=A1]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A2]").attr("disabled", "disabled");
  
    $("#LLAdropdownVar008").find("option[value=A3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A4]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=A5]").attr("disabled", false);
    
    $("#LLAdropdownVar008").find("option[value=SSO1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=SSO3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=DEV3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM2]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=FAM3]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME1]").attr("disabled", "disabled");
    
    $("#LLAdropdownVar008").find("option[value=PME2]").attr("disabled", "disabled");
     
  }
})
Posted
Comments
Richard Deeming 17-Mar-21 5:46am
   
You're disabling the options; you're not hiding them. They will still show, but you won't be able to select them.
Richard Deeming 17-Mar-21 5:47am
   
Also, you should be using prop to set the disabled property:
$("#LLAdropdownVar008").find("option[value=ACA1]").prop("disabled", false);
$("#LLAdropdownVar008").find("option[value=ACA2]").prop("disabled", true);
Computer Wiz99 17-Mar-21 10:37am
   
Thanks. How can I hide the other options and what is the difference in using attr vs prop?
Richard Deeming 17-Mar-21 10:41am
   
The jQuery documentation describes the difference between attr and prop:
.prop() | jQuery API Documentation[^]

To hide the elements, you could try setting their display to none:
$("#LLAdropdownVar008").find("option[value=ACA1]").prop("disabled", false).css("display", "initial");
$("#LLAdropdownVar008").find("option[value=ACA2]").prop("disabled", true).css("display", "none");
Computer Wiz99 17-Mar-21 11:08am
   
Thanks again.

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