How to hide dropdown value in javascript

Q: How do you enable disable a dropdown based on value in another dropdown in jquery?

val() == <yourValue>) { $(#ddl2). prop(disabled, true); } else $(#ddl2). prop(disabled, false); }); }); The above code will disable the ddl2 dropdown on select of a particular value in first dropdown.

I have two drop down menus where I want the options in the second drop down menu to be hidden depending of which option is selected in the first drop down menu. I have found some examples in google for this but the problem is that because I am too deep in my coding, I do not want to risk creating new functions and using jquery and etc from scratch. So what I want to know if someone can implement into my code the way this can be achieved by creating one example of this which is below:

Índice Show

How to hide values in dropdown in javascript?
How do I hide a drop down list in HTML?
How do I change a selection based on another dropdown?
How do you enable disable a dropdown based on value in another dropdown in jquery?

If optionDrop (Drop Down 1) value = "ABC", then numberDrop (Drop Down 2) options will shows "", "1", "2" and "3" but hides "4".

Below is javascript code which is relevant to this question (there is more to this code but don't need to show it for this question):

Html code that shows drop down menus:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > <table id="middleDetails" border="1"> <tr> <td>Option Type:</td> <td> <select name="optionDrop" onClick="getDropDown()"> <option value="">Please Select</option> <option value="abc">ABC</option> <option value="abcd">ABCD</option> <option value="abcde">ABCDE</option> <option value="trueorfalse">True or False</option> <option value="yesorno">Yes or No</option> </select> </td> </tr> <tr> <td>Number of Answers:</td> <td> <select name="numberDrop" id="numberDropId" onChange="getButtons()"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> </form>

Take two: function getDropDown() { var optionDrop = document. getElementById("optionDropId"); var numberDrop = document.

How do I hide a drop down list in HTML?

We use <select> and <option> elements to create a drop-down list and use disabled attribute in <select> element to disable the drop-down list element.

We want to change the selects options based on other dropdowns so we will follow the below steps..

Create a state variable that is initially null or undefined..

Create different arrays for different dropdowns..

Create a local variable say type that will hold any of the array based on the dropdown selected..

val() == "<yourValue>") { $("#ddl2"). prop("disabled", true); } else $("#ddl2"). prop("disabled", false); }); }); The above code will disable the "ddl2" dropdown on select of a particular value in first dropdown.