根据选择显示表格/表单
Show table/form based on selection
我知道这里有这样的问题,但我找不到适合我的答案。
我想要的是显示表单"默认"是选择了某些选项(在这种情况下,除了"禁止上诉"或"禁止上诉(西班牙语)"之外的所有内容,我希望表格"取消禁止"仅在禁止上诉或禁止上诉(西班牙语)被选择时显示最短和最简单的方式。
我知道使用JQuery或Javascript是可能的。
这是我的代码:
<select>
<option value="Ban Appeal" selected="selected"><-- Choose Topic --></option>
<option value="Ban Appeal">Ban Appeal</option>
<option value="Ban Appeal (Spanish)">Ban Appeal (Spanish)</option>
<option value="Bug Report">Bug Report</option>
<option value="Hacker Report">Hacker Report</option>
<option value="Staff Application">Staff Application</option>
<option value="Staff Complaint">Staff Complaint</option>
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="Suggestion">Suggestion</option>
</select>
<form name="default" id="default" style="display:none"> <!-- Template for every option but Unban/Spanish Unban -->
<table>
<!-- Leaving out everything in here because it's a lot -->
</table>
</form>
<form name="unban" id="unban" style="display:none"> <!-- Template for unban/Spanish unban -->
<table>
<tr>
<!-- Leaving out everything in here because it's a lot. -->
</tr>
</table>
</form>
使用 jQuery,您可以在选择更改时添加一个函数。然后,检查它具有哪个值并相应地显示或隐藏表单,如下所示:
$(document).ready(function(){ // you probably have a document-ready function already
$('select').change(function(){ // onchange event
switch ($(this).val()) { // check the value
case 'no-select':
$('form').hide();
break;
case 'Ban Appeal':
case 'Ban Appeal (Spanish)':
$('form#unban').show();
$('form#default').hide();
break;
default:
$('form#default').show();
$('form#unban').hide();
}
}).trigger('change'); // trigger the change event to make it work
// directly when the DOM is loaded
});
你也应该考虑给select
一个id,并在JavaScript中使用它;否则其他形式中的额外选择会导致问题。
我希望以后您想添加更多表单或选项时,如何扩展这个小片段。
只是稍微短一点,即使是以前的答案也能按预期工作:
$(function(){
$('select').on('change', function(){
var indexAppeal = !this.value.indexOf('Ban Appeal');
$('#default').toggle(indexAppeal);
$('#unban').toggle(!indexAppeal);
}).change();
});
相关文章:
- 有没有一种方法可以使用Javascript检索谷歌表单ITSELF(而不是电子表格)的数据
- 提交表单时如何在 HTML 表格中添加行
- 在表格中单击表单外的操作
- 如何关闭Angular中的表单验证,当点击按钮时,应该't发送表格
- HTML 表单不会使用 doPost 提交到电子表格
- 生成适合表格的表单
- 验证表单并打印到表格
- 根据选择显示表格/表单
- 使用表格数据填写表单
- Google Apps 脚本 - 表单不会自动邮寄电子表格响应
- 将禁用添加到表格列表中的表单选项
- 在复制到电子表格时将逻辑构建到 Google Apps 脚本表单中
- 谷歌电子表格网站表单jQuery脚本阻止发送
- 如果没有数据,如何隐藏表格并使用jQuery或JavaScript显示表单
- 使用 JavaScript 代码制作 HTML 表单和表格
- 如何在每个表格行中附加表单及其文件输入
- Javascript不会打开包含表格和表单的弹出窗口
- 我想制作我的表单,当他们发送时,它会自动在表格上显示“待处理”值
- jQuery表单提交是't提交表格
- 这是在单击按钮时将表格行更改为表单的最佳方式吗