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

HTML & Javascript - Show / Hide Form with Dropdown List or Radio

本文关键字：收音机 显示 表单 隐藏 下拉列表 amp Javascript HTML      更新时间：2023-09-26

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

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

对不起，我的英语。 =''

提前感谢！

使用按钮：

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

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

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

其次，我认为这样做的方法是将您的选项保留在单独的div 中，ID 为 选项1、选项2、选项3 等。根据选择框中的选择内容，您可以隐藏和取消隐藏特定的div

$("#options-select").change(function(){
    console.log("option changed");
    var optionSelected = $(this).attr("value");
    $(".optionDivs").hide();
    $("#optionDiv" + optionSelected).show();
});

这个想法是，当选择下拉列表中的任何内容时，所有选项div 都将隐藏，并显示具有从所选框中获得的值的div。

这是一个JSfiddle，它说明了相同的内容

相关文章：