2012-12-17 4 views
0

jquery를 구현하려면 어떻게해야합니까? 1을 선택하면 테이블에 tr 1 만 표시되고 2를 선택하면 tr 2 등이 표시됩니까?jquery 드롭 다운 show hide tr

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

미리 감사드립니다.

답변

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입니다.

+0

감사합니다. 이 일. – Peter