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/

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

我使用的所有jQuery方法都是well documented。

jquery dropdown show hide tr

1 个答案: