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>
답변을 작성하시기 전에 로그인 해주세요.
