HTML & Javascript - Показать / Скрыть форму с выпадающим списком или радио

Question

HTML & Javascript - Показать / Скрыть форму с выпадающим списком или радио

0

Доброе утро, у меня есть следующая форма HTML:

<table border="0">
<tr align="center">
<td colspan="2"><b>title</b></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>Test:</td><td><input type="text" name="test" size="25"></td>
</tr>
<tr>
<td>Name :</td><td><input type="text" name="name" size="25"></td>
</tr>
<tr>
<td align="left">Tipo de Linha :</td>
<td> <select name="linha" size="1">
<option value="0" selected="selected">Escolhe uma das opções...</option>
<option class="1" value="1">1</option>
<option class="2" value="2">2</option>
<option class="3" value="3">3</option>
<option class="4" value="4">4</option> </select> </td>
</tr>
</tr>
</table>

И мне действительно нужно:

В верхней части страницы мне нужно выбрать один из этих вариантов (1, 2, 3 или 4), и если я выберу номер 1, он покажет мне какой-то вопрос формы, если я выберу номер 2, другие зададут вопросы и так далее.,

Список опций/меню может быть радио или выпадающим меню или что угодно.

Извините мой английский. знак равно

Thnx заранее!

sleepyvaz 20 сен. 2013, в 12:36

Источник

Теги:

javascript

html

forms

show-hide

3 ответа

Ещё вопросы

Eyal Elmakies · Answer 1 · 2013-09-20T08-33-00.000Z

Используйте кнопки:

<button onclick="form1()">1</button>
<button onclick="form2()">2</button>
<button onclick="form3()">3</button>
<button onclick="form4()">4</button>

<script>
function form1() {
// put here code to show form1
}
function form2() {
// put here code to show form2
}
function form3() {
// put here code to show form3
}
function form4() {
// put here code to show form4
}
</script>

Shrayas · Answer 2 · 2013-09-20T08-25-00.000Z

Во-первых, очень неправильно использовать таблицы для выравнивания форм. Вы можете прочитать об этом здесь, здесь и здесь.

Во-вторых, я думаю, что способ сделать это состоял бы в том, чтобы сохранить ваши параметры в отдельных div с идентификатором, как опция1, option2, option3 и т.д. Исходя из того, какой выбор в поле выбора, вы можете скрывать и отображать конкретные divs

$("#options-select").change(function(){
    console.log("option changed");

    var optionSelected = $(this).attr("value");
    $(".optionDivs").hide();
    $("#optionDiv" + optionSelected).show();

});

Идея состоит в том, что, когда выбрано что-либо в раскрывающемся списке, все разделители параметров скрыты, и отображается значение со значением, полученным из выбранного поля.

Вот JSfiddle, который иллюстрирует тот же

Это работало для меня как отдельный код. Я пытался получить весь мой код, и теперь он мне ничего не показывает.
Это работало для меня как отдельный код. Я пытался получить весь мой код, и теперь он ничего не показывает мне, в IE, но в Chrome это работает! В основном в IE это дает мне ошибку в "console.log", и я не понимаю, почему. Однако на Chrome все работает нормально. Спасибо заранее! Sleepy.pT

Elen · Answer 3 · 2013-09-20T07-05-00.000Z

Короче говоря, решение jQuery:

$(document).on("change",'select[name=linha]',function() {
    var val= $('option:selected', this).val();
    $(".q_set").hide();
    $("#questions"+val).show();
});

у вас есть набор вопросов уже на странице, но скрыт. Когда пользователь выбирает параметр, jQuery получает его значение и показывает набор вопросов соответственно по id, то есть qustions1, qustions2, qustions3, qustions4

Все, ваши наборы вопросов имеют класс q_set и эту строку $(".q_set").hide(); гарантирует, что все они скрыты перед отображением определенного набора вопросов - $("#questions"+val).show();