HTML & Javascript - 使用下拉列表或单选显示/隐藏表单

Question

大家早上好， 我有以下 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，它将显示一些表单问题，其他表单问题和等等..

选项列表/菜单可以是单选或下拉或其他。

对不起我的英语。 =\

提前谢谢！

Answer 1

使用按钮：

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

Answer 2

简而言之，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();

Answer 3

首先，使用表格对齐表单是一种非常错误的做法。您可以阅读更多关于它的信息here、here 和 here。

其次，我认为这样做的方法是将您的选项保留在单独的 div 中，ID 为 option1、option2、option3 等。根据选择框中的选择，您可以隐藏和取消隐藏具体的div

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

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

});

The idea is that when the anything in the drop down is selected, all the option divs are hidden, and the one with the value obtained from the selected box is displayed.

Here 是一个说明相同的 JSfiddle