Drop down list - display div when clicking an option

Question

You must write a function that 'shows' the corresponding part of the form depending on what the user has selected. For example, if 'Pizza' is selected, the div #section2 with the question about Pizza type should be shown.

This is part of the html code

<form id="survey" action="#" method="post"> <div id="section1"> <label for="food">What is your favourite type of food?</label> <select id="food" onchange="selection()"> <option value="pizza">Pizza</option> <option value="mex">Mexican</option> <option value="thai">Thai</option> </select> </div> <div id="section2"> What is your favourite type of pizza?<br> <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian"> <label for="supreme">Supreme</label><input type="radio" id="supreme"> <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian"> </div>

How would i write a javascript function so that when I click the option pizza, it will display section 2? I'm a complete javascript novice so any help would be great.

iambriansreed · Accepted Answer · 2012-05-13 13:43:17Z

3

DEMO: http://jsfiddle.net/iambriansreed/rQr6v/

JavaScript:

var sections = { 'pizza': 'section2', 'mex': 'section3', 'thai': 'section4' }; var selection = function(select) { for(i in sections) document.getElementById(sections[i]).style.display = "none"; document.getElementById(sections[select.value]).style.display = "block"; }

Checkout the demo. Replace the section3 and section4 divs with actual content.

answered May 13, 2012 at 13:43

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anthony Do Over a year ago

thank you very much, the demo is very good for seeing what the layout for the javascript and what the web document will look like.

Anthony Do Over a year ago

i have one more question and was wondering if you could help me. i also need to display a message in the JavaScript console indicating which food type is selected. a hint given is to use console.log(""))

iambriansreed Over a year ago

Add console.log(select.value); to the function.

VisioN · Accepted Answer · 2012-05-13 13:15:29Z

There are plenty of solutions for that. One of the simpliest options is to change your markup a bit and use div IDs.

HTML:

<div id="section1"> <label for="food">What is your favourite type of food?</label> <select id="food" onchange="selection(this)"> <option value="pizza">Pizza</option> <option value="mex">Mexican</option> <option value="thai">Thai</option> </select> </div> <div id="section_pizza" style="display: none;"> What is your favourite type of pizza?<br> <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian"> <label for="supreme">Supreme</label><input type="radio" id="supreme"> <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian"> </div>

JavaScript:

function selection(select) { document.getElementById("section_" + select.value).style.display = "block"; }

However, you can use JQuery library and make it faster and more flexible. You can easily add animation to blocks and add extra functionality.

HTML:

<div id="section1"> <label for="food">What is your favourite type of food?</label> <select id="food"> <option value="pizza">Pizza</option> <option value="mex">Mexican</option> <option value="thai">Thai</option> </select> </div> <div id="section2" data-type="pizza" style="display: none;"> What is your favourite type of pizza?<br> <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian"> <label for="supreme">Supreme</label><input type="radio" id="supreme"> <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian"> </div>

JavaScript:

$("#food").change(function() { $("[data-type]").hide(); $("[data-type='" + this.value + "']").show(1000); });

i can't really change that. this is a practical which i need to do :s. The id's need to stay section1,section2,section3 for the options pizza, mex and thai :/
@AnthonyDo Please check the post update and have a look at JQuery.
The OP did not ask for a jQuery solution. Your first JavaScript option didn't meet his needs. I up voted though.
You are not right. I'm a complete javascript novice so any help would be great. Hence I can give an advice to use JQuery, it is not prohibited. Moreover, first I gave quite workable solution -- in the question there is nothing mentioned about naming the blocks. This comes from the comment only. That's why I am confused.

Collectives™ on Stack Overflow

Drop down list - display div when clicking an option

2 Answers 2

3 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Linked

Related