Radio Button and Dropdown lists

Hi, I am trying to make a html form where a user selects a radio button, the dropdown list values changes. For example, there would be 6 radio buttons, but the dropdown list values would change based on what radio button is selected. I believe the solution would be a JavaScript onclick event. Any advice?

javascript lists button onclick and dropdown radio

13th Aug 2020, 9:23 PM

Love Coding

3 Answers

Interesting, do you have any example code you can share? We can build off of your attempt, it would be easier rather than starting from scratch https://www.w3schools.com/css/css_dropdowns.asp https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

13th Aug 2020, 9:28 PM

Steven M

I will build something in a hour or so. I will post it here thank you!

13th Aug 2020, 9:43 PM

Making A Change

Hi Steven M, I want to click on the specific radio button and the dropdown list selects the correct food based on the correct category. For example, if the user selects the Veggies Radio Button, Only the veggies values should show up in the dropdown list. Right now the radio buttons are not linked to the dropdowns at all and the dropdown list shows all the values. The values should change based on what radio button is selected. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Radio Button with Correct Dropdown Values</h2> <p>I want to click on the specific radio button and the dropdown list selects the correct food based on its category</p> <form> <div> <input type="radio" id="veggies" name="food" value="veggies"> <label for="veggies">Veggies</label><br> <input type="radio" id="carbs" name="food" value="carbs"> <label for="carbs">Carbs</label><br> <input type="radio" id="meats" name="food" value="meats"> <label for="meats">Meats</label> </div> <div> <select name="food" id="food"> <option value="broccoli">Broccoli</option> <option value="tomato">Tomato</option> <option value="asparagus">Asparagus</option> <option value="carrots">Carrots</option> <option value="rice">Rice</option> <option value="potatoes">Potatoes</option> <option value="bread">Bread</option> <option value="fries">Fries</option> <option value="fish">Fish</option> <option value="lamb">Lamb</option> <option value="chicken">Chicken</option> <option value="beef">Beef</option> </select> </div> </body> </html>

13th Aug 2020, 11:34 PM

Love Coding