Question

我有2个表“iu”和“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”和“ui_table”。

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

我希望有人可以提供帮助。

Answer 1

实现这一目标的方法有很多种。一个在下面 - 我已将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>

Answer 2

您应该使用jQuery的教程，并熟悉库的工作原理。

您的代码中存在多个错误：

没有字段在改变。你想要的是jQuery的更改功能，这里描述：http://api.jquery.com/change/
更改函数的代码属于$（document）.ready函数，因此jquery在加载文档时执行它。必须在那里执行代码，以便在更改选择时调用该函数。
您希望使用选项的更改而不更改选项。
在更改功能的正文中，您可以隐藏一个表并切换其他：切换两者，因此当选择该选项时，也可以显示第一个表。此构造也仅适用于2个选项。如果你想要更多的选择，你必须像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>

Answer 3

jQuery中有一个方法可以隐藏/显示名为toggle()的匹配元素由于你需要首先隐藏IU表，你可能需要一些css技巧。因此，将display:none;放入IU表并切换到更改下拉列值。工作小提琴是here

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

3 个答案: