Display Item in dropdown based on Radio button selection

Question

I want to display particular items in my dropdown based on the selected radio button by the user.

The two choices are Financial Alteration and Non-Financial Alteration. So if I select the Financial Alteration Radio Button. The drop-down just displays me the values below financial Alteration.

Here is the Code

       
                                                        
                                                            Type of Alteration Request
                                                            
                                                                
                                                                
                                                                    Financial
                                                                
                                                                
                                                                
                                                                    Non-Financial
                                                                

                                                            
                                                        
                                                    



                                                    
                                                        
                                                            Endorsement
                                                                Type

Adhitya · Accepted Answer

I made an example for you here. The example is basically the following steps:

Mark up your HTML


Radio 2

Radio 3

Add CSS

.no-display {display: none;}

Add event listeners to the radio buttons that call your drop-down selecting function


for (var i = 0; i < radio_buttons.length; i++) {
    radio_buttons[i].addEventListener("change", setDropDown);
}

function setDropDown() {
    setDropDownsForNoDisplay();
    if (this.checked) {
        setDropDownForDisplay(this.value);        
    }
}

Add helper functions that the drop-down selecting function uses

function setDropDownsForNoDisplay() {
    for (var i = 0; i < dropdowns.length; i++) {
        dropdowns[i].classList.add("no-display");
    }
}

function setDropDownForDisplay(x) {
    if (x === "1") {
        document.getElementById("drop1").classList.remove("no-display");
    } else if (x === "2") {
        document.getElementById("drop2").classList.remove("no-display");
    } else if (x === "3") {
        document.getElementById("drop3").classList.remove("no-display");
    }
}

You could also use events ("onclick", "onchange") directly in the radio button markup instead of adding event listeners, but I prefer keeping my events separated from the markup.

Here is Snippet Run:

var radio_buttons = document.getElementsByName("group");

for (var i = 0; i < radio_buttons.length; i++) {
    radio_buttons[i].addEventListener("change", setDropDown);
}

function setDropDown() {
    setDropDownsForNoDisplay();
    if (this.checked) {
        setDropDownForDisplay(this.value);        
    }
}

var dropdowns = document.getElementsByTagName("select");
function setDropDownsForNoDisplay() {
    for (var i = 0; i < dropdowns.length; i++) {
        dropdowns[i].classList.add("no-display");
    }
}

function setDropDownForDisplay(x) {
    if (x === "1") {
        document.getElementById("drop1").classList.remove("no-display");
    } else if (x === "2") {
        document.getElementById("drop2").classList.remove("no-display");
    } else if (x === "3") {
        document.getElementById("drop3").classList.remove("no-display");
    }
}

.no-display {display: none;}

Radio 1

Radio 2

Radio 3

Display Item in dropdown based on Radio button selection

Answers (1)

Related Questions