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

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

我希望有人能帮忙。

来源

2013-07-08 Hongxuan

请参阅此链接可以帮助ühttp://stackoverflow.com/questions/1240205/how-to-hide-show-select-boxes-depending-on-other-choosed-select-box-选项 – Bharu

你或许应该使用jQuery的教程工作，并与图书馆的运作familarize自己。

有在你的代码的多个错误：

没有电平变化领域。你需要的是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-08 06:53:32 Silahe

非常感谢！我是一个javascript新手..这是我第一次使用js ..我将在未来遵循jquery教程和研究。感谢您的批评和解决方案。大声笑.. =） – Hongxuan

但是，如果有3个或更多的表... – Hongxuan

，这种方式似乎无效，如我在最后一个要点中所述。 – Silahe

有很多方法来实现这一点。一个是下面 - 我加入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-08 06:31:27 Paritosh

有jQuery中的方法，它确实隐藏/显示匹配的元素称为toggle() 当你需要隐藏在第一IU表，你可能需要一些css技巧。因此，将display:none;放在IU表中，并切换改变下拉值。工作小提琴是here

来源

2013-07-08 07:13:00

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

回答

相关问题