jQuery로 tr 표시 또는 숨기기 방법?

Question

이것은 내가 작업하고있는 것이 테이블 행이라는 사실과 아무런 관련이 없습니다. 그러나 이것은 제 문제입니다. 선택 메뉴가 있습니다. 이러한 옵션 중 일부는 선택시 양식의 표 행을 숨겨야합니다. 다른 테이블 행은 동일한 테이블 행을 표시합니다. 현재 스크립트에서 TR은 어떤 방식으로도 영향을받지 않지만 콘솔에서 이벤트를 기록하기 때문에 클릭 또는 선택에 반응한다는 것을 알고 있습니다. 다른 문제는 메뉴에있는 항목이 선택되면 (예 : 화살표) 콘솔 로그에 기록됩니다. 옵션이 실제로 선택되었을 때만 tr이 보이거나 숨겨지기를 원합니다. 나는 이것에 대해 충분히 명확 해 졌으면 좋겠다.

내 jQuery를 :

<table align="center" width="100%" cellspacing="1" cellpadding="5" border="0"> 
        <tr> 
         <td align="center" colspan="2" class="row1"><h1>Article Info</h1></td> 
        </tr><tr> 
         <td align="right" width="30%" class="row2"><label>Article Title</label></td> 
         <td align="left" width="70%" class="row2"><input type="text" name="title" size="30" class="text-input" value="Max: The Curse of Brotherhood Review"></td> 
        </tr><tr> 
         <td align="right" width="30%" class="row2"><label>Category</label></td> 
         <td align="left" width="70%" class="row2"><select name="category_id"> 
           <option value="1" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Base Command News</option> 
           <option value="4" rel="toggleElement" data-elem-id="platforms" data-elem-status="show">Gaming Articles</option> 
           <option value="8" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Resources</option> 
<option value="2" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Staff Intel</option> 
          <option value="7" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">Tutorials</option> 
          <option value="10" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Clan Websites</option> 
          <option value="9" rel="toggleElement" data-elem-id="platforms" data-elem-status="hide">---Game Servers</option> 
</select></td> 
        </tr><tr class="platforms"> 
         <td align="right" width="30%" class="row2"><label>Platform(s)</label></td> 
         <td align="left" width="70%" class="row2">Nintendo <input type="checkbox" name="platforms[]" value="3" />&nbsp;&nbsp;&nbsp;PC <input type="checkbox" name="platforms[]" value="4" />&nbsp;&nbsp;&nbsp;PlayStation <input type="checkbox" name="platforms[]" value="2" />&nbsp;&nbsp;&nbsp;Xbox <input type="checkbox" name="platforms[]" value="1" />&nbsp;&nbsp;&nbsp;</td> 
        </tr> 

PS :

$('[rel="toggleElement"]').ready(function(){ 

     $(this).on('click', function(){ 

      var elem = $(this).data('elem-id'); 
      elem = $('.'+elem); 

      if($(this).data('elem-status') == 'show'){ 

       elem.show(); 

      } 
      if($(this).data('elem-status') == 'hide'){ 

       elem.hide(); 

      } 

      console.log('An element was toggled!');   

    }); 

}); 

가 여기 내 HTML 소스입니다 특정 옵션은 단지 숨기기를 표시하고 다른 사람 때문에 내가 토글()를 사용하지 않습니다.

TIA!

Answer 1

이 사용하여 수행 할 수있다 "변경"이벤트

$(document).ready(function() { 
    $('.platforms').hide(); 
    $(document).on('change', 'select[name="category_id"]', function() { 
     var $selectedOption = $(this).find("option:selected"); 
     var elem = $selectedOption.data('elem-id'); 
     elem = $('.' + elem); 

     if ($selectedOption.data('elem-status') == 'show') { 
      elem.show(); 
     } 
     if ($selectedOption.data('elem-status') == 'hide') { 
      elem.hide(); 
     } 

     console.log('An element was toggled!'); 
    }); 
}); 

jsfiddle demo

Answer 2

사용 jQuery를 변경() select 태그 및 얻을 사용자 정의 속성 (데이터 요소-ID, 데이터 요소-상태) 선택한 옵션의

$(document).ready(function(){ 
    if($('option:selected', 'select[name="category_id"]').data('elem-status') == 'hide') { 
    $('.platforms').hide(); 
    } 
    $('select[name="category_id"]').change(function(){ 
      var elem = $('option:selected', this).data('elem-id'); 
      var status = $('option:selected', this).data('elem-status'); 
      var class_target = $('.'+elem); 
      if(status == 'show'){ 
       class_target.show(); 
      } 
      if(status == 'hide'){ 
       class_target.hide(); 
      } 
      console.log('An element was toggled!');   
    }); 

}); 

jsfiddle