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，它将显示一些表单问题，其他表单问题等等。 .

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

对不起我的英语。=\

提前谢谢！

4

3 回答 3

0

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

其次，我认为这样做的方法是将您的选项保留在具有 ID 的单独 div 中，例如 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.

这是一个说明相同的 JSfiddle

于 2013-09-20T10:30:51.267 回答
0

使用按钮：

<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>
于 2013-09-20T09:54:16.773 回答
0

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

于 2013-09-20T10:03:45.380 回答