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

Answer 1

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

HTML:

    What is your favourite type of food?
    
        Pizza
        Mexican
        Thai
    


    What is your favourite type of pizza?

    Hawaiian
    Supreme
    Vegetarian

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:

    What is your favourite type of food?
    
        Pizza
        Mexican
        Thai
    


    What is your favourite type of pizza?

    Hawaiian
    Supreme
    Vegetarian

JavaScript:

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