Доброе утро, у меня есть следующая форма 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 заранее!
Используйте кнопки:
<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>
Во-первых, очень неправильно использовать таблицы для выравнивания форм. Вы можете прочитать об этом здесь, здесь и здесь.
Во-вторых, я думаю, что способ сделать это состоял бы в том, чтобы сохранить ваши параметры в отдельных div с идентификатором, как опция1, option2, option3 и т.д. Исходя из того, какой выбор в поле выбора, вы можете скрывать и отображать конкретные divs
$("#options-select").change(function(){
console.log("option changed");
var optionSelected = $(this).attr("value");
$(".optionDivs").hide();
$("#optionDiv" + optionSelected).show();
});
Идея состоит в том, что, когда выбрано что-либо в раскрывающемся списке, все разделители параметров скрыты, и отображается значение со значением, полученным из выбранного поля.
Вот JSfiddle, который иллюстрирует тот же
Короче говоря, решение 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();