Выпадающий список - отображать div при выборе опции

Вы должны написать функцию, которая "показывает" соответствующая часть формы в зависимости от того, что выбрал пользователь. Например, если «пицца»; выбран div # section2 с вопросом о типе пиццы.

Это часть 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>
</code>

Как бы я написал функцию javascript, чтобы при щелчке по опции «пицца» отображался раздел 2? Я новичок в JavaScript, поэтому любая помощь будет отличной.

Ответы на вопрос(2)

о изменить разметку и использоватьdiv Идентификаторы.

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";
}

Тем не менее, вы можете использоватьБиблиотека JQuery и сделать это быстрее и гибче. Вы можете легко добавить анимацию в блоки и добавить дополнительные функции.

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);
});
 13 мая 2012 г., 15:50
@ downvoter Оставьте комментарий, пожалуйста.
 Anthony Do13 мая 2012 г., 15:17
я не могу это изменить. это практическое, что мне нужно сделать: с. Идентификаторы должны оставаться в section1, section2, section3 для параметров pizza, mex и thai: /
 13 мая 2012 г., 15:21
@AnthonyDo Пожалуйста, проверьте обновление поста и посмотрите на JQuery.
 14 мая 2012 г., 05:17
ОП не запросил решение jQuery. Ваш первый вариант JavaScript не соответствовал его потребностям. Я проголосовал, хотя.
 14 мая 2012 г., 08:03
Ты не прав.I'm a complete javascript novice so any help would be great, Поэтому я могу дать совет по использованию JQuery, это не запрещено. Более того, сначала я дал вполне работоспособное решение - в вопросе ничего не сказано о наименовании блоков. Это происходит только из комментария. Вот почему я запутался.
Решение Вопроса

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";

}

Оформить заказ Заменитьsection3 а такжеsection4 Div с фактическим содержанием.

 13 мая 2012 г., 16:06
добавлятьconsole.log(select.value); к функции.
 Anthony Do13 мая 2012 г., 16:01
Большое спасибо, демоверсия очень хороша для того, чтобы увидеть, как выглядит макет для javascript и как будет выглядеть веб-документ.
 Anthony Do13 мая 2012 г., 16:03
У меня есть еще один вопрос, и мне было интересно, если вы могли бы помочь мне. Мне также нужно отобразить сообщение в консоли JavaScript, указывающее, какой тип пищи выбран. подсказка заключается в использовании console.log (& quot; & quot;))

Ваш ответ на вопрос