jquery dropdown show hide tr

Question

如何在选择时实现jquery 1如果表格只显示tr 1，当我选择2时它会显示tr 2等？

<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方法是well documented。