tr요소가 좀 많은 상태인데, 스크립트로 조건을걸었을 시, 첫번째 tr부분만 충족되고 나머지 부분들은 2차부분이 생성되지 않습니다 ㅠ

tr요소가 좀 많은 상태인데, 스크립트로 조건을걸었을 시, 첫번째 tr부분만 충족되고 나머지 부분들은 2차부분이 생성되지 않습니다 ㅠ

QA

tr요소가 좀 많은 상태인데, 스크립트로 조건을걸었을 시, 첫번째 tr부분만 충족되고 나머지 부분들은 2차부분이 생성되지 않습니다 ㅠ

본문



<tr class='aa sel1111'>
                  <th scope='row'>선택</th>
                  <td>
                     <select name='wr_3[]' id='wr_3' class='frm_input'>
                                <option value=''>선택해 주세요.</option>
                                <option value='1-1'>1-1</option>
<option value='1-2'>1-2</option>
<option value='1-3'>1-3</option>
<option value='1-4'>1-4</option>
<option value='1-5'>1-5</option>
<option value='1-6'>1-6</option>
<option value='1-7'>1-7</option>
<option value='1-8'>1-8</option>
<option value='1-9'>1-9</option>

                            </select>
                  </td>
            </tr>
<tr class='aa sel1121'>
                  <th scope='row'>선택</th>
                  <td>
                     <select name='wr_3[]' id='wr_3' class='frm_input'>
                                <option value=''>선택해 주세요.</option>
                                <option value='2-1'>2-1</option>
<option value='2-2'>2-2</option>
<option value='2-3'>2-3</option>
<option value='2-4'>2-4</option>
                            </select>
                  </td>
            </tr>

 

이렇게 셀렉트 박스를 제작하였습니다. 그런데... tr요소가 좀 많은 상태입니다  (약 50건정도?)

 

여기서 문제는 

 



<script>
  
                    $(function(){
                        
                          //입력박스 숨어있다가
                    $("tr.tr_sub").hide();
                    $("#wr_3").change(function() {
                        
                            if($("#wr_3").val() == "1-1") {
                                $('tr.sel1111_1_sub').show();
                            }  else {
                                $('tr.sel1111_1_sub').hide();
                            }
                        
                    
                            if($("#wr_3").val() == "2-1") {
                                    $('tr.sel1111_2_sub').show();
                                }  else {
                                    $('tr.sel1111_2_sub').hide();
                                }
.
.
.
 

 

이렇게 스크립트로 조건을 걸었을 시, 앞의 태그 <tr class='aa sel1111'> 이부분만 2차셀렉트 쇼 하이드가 되고, 

 

나머지 부분들은 전부 쇼 하이드가 되지 않습니다 ㅠㅠ 

 

문제가 무엇인지 도무지 모르겠어서 질문드려 봅니다 ㅠ

이 질문에 댓글 쓰기 :

답변 1

50개의 셀렉트박스는 모두 ID 를 다르게 해야 됩니다. (동일 문서 내에 ID 는 모두 유일한 값을 가져야 합니다.) wr_3_1, wr_3_2, ..

id를 이용하려는 경우, jquery 셀렉터도 $('#wr_3_1'), $('#wr_3_2'), .. 같이 지정해야 됩니다.

다만, 비슷한 성격인 경우 셀렉터 지정방식을 다르게 한 뒤 $(this)를 이용하여 이벤트 코드를 간략화할 수 있습니다.

 

change 이벤트 관련한 코드는 간략화하였습니다.


<tr class='aa sel1111'>
                  <th scope='row'>선택</th>
                  <td>
                     <select name='wr_3[]' id='wr_3_1' class='frm_input'>
                               ~
                            </select>
                  </td>
            </tr>
<tr class='aa sel1121'>
                  <th scope='row'>선택</th>
                  <td>
                     <select name='wr_3[]' id='wr_3_2' class='frm_input'>
                                ~
                            </select>
                  </td>
            </tr>
<script>
$(function(){    
    $("tr.tr_sub").hide();
    
    $("select[name^=wr_3]").on('change', function() {
        var s = $(this).val().charAt(0);        
        if ($(this).val().slice(-2) == "_1")
            $('tr.sel1111_' + s + '_sub').show();       
        else
            $('tr.sel1111_' + s + '_sub').hide();
    });
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT