jquery - jquery下拉显示隐藏tr

Question

如果我想在选择 1 时表将仅显示 tr 1 而当我选择 2 时它将显示 tr 2 等，如何实现 jquery？

<select name="select_main_table">
<option value="1" selected="selected">Show line 1</option>
<option value="2" >Show line 2</option>
<option value="3" >Show line 3</option>
</select>

<table id="main_table">
 <tr id="show1"><td>line 1</td><td<line 1/td></tr>
 <tr id="show2"><td>line 2</td><td<line 2/td></tr>
 <tr id="show3"><td>line 2</td><td<line 2/td></tr> 
</table>

提前致谢？

Answer 1

也许有点像这样：

$(document).ready(function() {
   $('select[name="select_main_table"]').change(function() {
      $("#main_table tr").show().slice(this.value).hide();
   }).change();
});

​演示：http: //jsfiddle.net/kms8k/

编辑：我认为我最初的答案是基于对您的要求的误解 - 我认为您的意思是选择“2”意味着“显示前两行”。要仅显示指定的行，请执行以下操作：

$(document).ready(function() {
   $('select[name="select_main_table"]').change(function() {
      $("#main_table tr").hide().eq(this.value-1).show();
      // OR
      $("#show" + this.value).show().siblings().hide();
   }).change();
});

演示：http: //jsfiddle.net/kms8k/1/

请注意，您可以在不使用 tr 元素的属性的情况下使其工作id，如果您希望通过根本不包含该属性来简化您的 html...

我使用的所有 jQuery 方法都有很好的文档记录。