0

我有 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”表。

我希望有人能提供帮助。

4

3 回答 3

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>
于 2013-07-08T06:31:27.760 回答
1

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

您的代码中有多个错误：

  • 没有字段 onchange。你想要的是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>
于 2013-07-08T06:53:32.823 回答
1

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

于 2013-07-08T07:13:00.487 回答