选择不同选项后隐藏/显示表格

Hide/Display tables after selecting different options

本文关键字：显示 表格 隐藏 选项 选择      更新时间：2023-09-26

我有两个表"iu"answers"si"，我放了一个下拉列表供用户选择要查看的表。选择该选项后，将显示相应的表格。

另一个应该是隐藏的，但当加载页面时，会显示默认表"si"。

这是我的JavaScript代码：

<script>
     $(document).ready(function()
    {
        $('#iu_table').hide();
    });
    $('#iu').onchange=function()
    {
        $('#si_table').hide();
        $('#iu_table').toggle();
    }
</script>

和HTML代码：

<select> 
        <option id="si" selected>SI</option> 
        <option id="iu">IU</option> 
    </select>

表ID分别为"si_table"answers"ui_table"。

我使用了上面的代码，但它不起作用。无论我选择哪一个，都只显示"si"表。

我希望有人能帮忙。

您可能应该使用jQuery的教程，熟悉库的工作方式。

您的代码中有多个错误：

  • 更改时没有字段。您想要的是jQuery的更改功能，如下所述：http://api.jquery.com/change/
  • change函数的代码属于$（document）.ready函数，因此jquery在加载文档时执行它。代码必须在那里执行，以便在更改选择时调用函数
  • 您希望处理选择的更改而不是选项的更改
  • 在更改函数的主体中，您可以隐藏一个表并切换另一个表：切换两者，以便在选择该选项时也可以显示第一个表。此外，此构造仅适用于正好两个选项。如果你想要更多的选择，你必须像Paritosh的答案一样解决问题

这是一个工作示例：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
     $(document).ready(function()
    {
        $('#iu_table').hide();
        $('#selector').change(function()
            {
                $('#si_table').toggle();
                $('#iu_table').toggle();
            });
    });
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
 <select id="selector"> 
        <option id="si" selected="selected">SI</option> 
        <option id="iu">IU</option> 
 </select>
</body>

有很多方法可以实现这一点。一个是下面的-我已经将id属性添加到下拉控件

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select>
<script>
$('#myselection').bind('change', function(){
    if($('#myselection option:selected').attr('id') == "si"){
       $('#si_table').show();
       $('#iu_table').hide();
    }
    else if($('#myselection option:selected').attr('id') == "iu"){
       $('#si_table').hide();
       $('#iu_table').show();
    }
});
</script>

jQuery中有一个方法可以隐藏/显示匹配的元素，称为toggle（）由于一开始需要隐藏IU表，因此可能需要一些css技巧。因此，将display:none;放在IU表中，并切换更改下拉值。工作小提琴在这里

相关文章：