Question

How do implement the jquery if I want when selected 1 the table will only show tr 1 and when I selected 2 it will show tr 2 and etc?

<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>

Thanks in advance?

Answer 1

Perhaps a little something like this:

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

​Demo: http://jsfiddle.net/kms8k/

EDIT: I think my original answer was based on a misunderstanding of your requirement – I thought you meant that selecting “2” meant “show the first two lines”. To show only the specified line do this:

$(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();
});

Demo: http://jsfiddle.net/kms8k/1/

Notice that you can make it work without using the id attribute of the tr elements, should you wish to simplify your html by not including that attribute at all…

All of the jQuery methods I’ve used are well documented.