select 질문드립니다.
본문
현재 1번 select를 선택하면 2번 select에 해당 항목이 나오는 식으로 작업이 되어있습니다.
소스는 아래와 같습니다.
*script 부분
<script>
function setCategory2(){
if(document.getElementById('sel1').value == "1"){
document.getElementById('sel2').length = 1;
document.getElementById('sel2').options[1] = new Option("급여");
document.getElementById('sel2').options[1].value = "급여";
document.getElementById('sel2').options[2] = new Option("지급수수료_활동비");
document.getElementById('sel2').options[2].value = "지급수수료_활동비";
document.getElementById('sel2').options[3] = new Option("복리후생비");
document.getElementById('sel2').options[3].value = "복리후생비";
document.getElementById('sel2').options[4] = new Option("예수금");
document.getElementById('sel2').options[4].value = "예수금";
document.getElementById('sel2').options[5] = new Option("보험료");
document.getElementById('sel2').options[5].value = "보험료";
document.getElementById('sel2').options[6] = new Option("지급임차료");
document.getElementById('sel2').options[6].value = "지급임차료";
document.getElementById('sel2').options[7] = new Option("수도광열비");
document.getElementById('sel2').options[7].value = "수도광열비";
}
if(document.getElementById('sel1').value == "2"){
document.getElementById('sel2').length = 1;
document.getElementById('sel2').options[1] = new Option("여비교통비");
document.getElementById('sel2').options[1].value = "여비교통비";
document.getElementById('sel2').options[2] = new Option("통신비");
document.getElementById('sel2').options[2].value = "통신비";
document.getElementById('sel2').options[3] = new Option("차량유지비");
document.getElementById('sel2').options[3].value = "차량유지비";
document.getElementById('sel2').options[4] = new Option("운반비");
document.getElementById('sel2').options[4].value = "운반비";
document.getElementById('sel2').options[5] = new Option("교육훈련비");
document.getElementById('sel2').options[5].value = "교육훈련비";
document.getElementById('sel2').options[6] = new Option("도서인쇄비");
document.getElementById('sel2').options[6].value = "도서인쇄비";
document.getElementById('sel2').options[7] = new Option("회의비");
document.getElementById('sel2').options[7].value = "회의비";
document.getElementById('sel2').options[8] = new Option("소모품비");
document.getElementById('sel2').options[8].value = "소모품비";
document.getElementById('sel2').options[9] = new Option("지급수수료_기타");
document.getElementById('sel2').options[9].value = "지급수수료_기타";
document.getElementById('sel2').options[10] = new Option("광고선전비");
document.getElementById('sel2').options[10].value = "광고선전비";
document.getElementById('sel2').options[11] = new Option("업무추진비");
document.getElementById('sel2').options[11].value = "업무추진비";
document.getElementById('sel2').options[12] = new Option("행사비");
document.getElementById('sel2').options[12].value = "행사비";
document.getElementById('sel2').options[13] = new Option("지구환경개선사업비");
document.getElementById('sel2').options[13].value = "지구환경개선사업비";
document.getElementById('sel2').options[14] = new Option("나눔실천사업비");
document.getElementById('sel2').options[14].value = "나눔실천사업비";
document.getElementById('sel2').options[15] = new Option("교육사업비");
document.getElementById('sel2').options[15].value = "교육사업비";
document.getElementById('sel2').options[16] = new Option("문화행사사업비");
document.getElementById('sel2').options[16].value = "문화행사사업비";
document.getElementById('sel2').options[17] = new Option("네트워크사업비");
document.getElementById('sel2').options[17].value = "네트워크사업비";
document.getElementById('sel2').options[18] = new Option("발간사업비");
document.getElementById('sel2').options[18].value = "발간사업비";
}
}
</script>
*html부분
<select name="wr_14[]" onchange="setCategory2()" id="sel1">
<option value="">= 선택 =</option>
<option value="1">고정비</option>
<option value="2">변동비</option>
</select>
<select name="wr_11[]" id="sel2">
<option value="">= 계정 =</option>
</select>
여기서 내용 추가버튼 클릭시 위의 폼이 계속해서 추가되는 형식으로 만들었는데요
추가되는 부분은 아래와 같습니다.
*script 부분
<script type="text/javascript">
$(function() {
$("#addTR").click(function () {
var row = "<tr>";
row += "<th scope='row'><label for='wr_12'><strong class='sound_only'>필수 </strong></label></th>";
row += "<td class='wr_content' colspan='3'>";
row += "<select name='wr_14[]' onchange='setCategory2()' id='sel1'>";
row += "<option value=''>= 선택 =</option>";
row += "<option value='1'>고정비</option>";
row += "<option value='2'>변동비</option>";
row += "</select>";
row += " <select name='wr_11[]' id='sel2'>";
row += "<option value=''>= 계정 =</option>";
row += "</select>";
row += " <input type='text' name='wr_12[]' style='width:500px;' placeholder='지출 내역을 입력해주세요' required>";
row += " <input type='text' name='wr_13[]' value='<?php echo $wr_6 ?>' onkeydown='onlyNumber(this)' placeholder='비용 (숫자만 입력)' required> 원 <span style='color:#ff0000;'></span>";
row += "</td>";
row += "<td><span>삭제</span></td>";
row += "</tr>";
$("#table").append(row); });
$("#table").on("click", "span", function() { $(this).closest("tr").remove();
});
});
</script>
*html 부분
<p><span id="addTR" style="cursor:pointer;">내용 추가</span></p>
제가 작업한 소스는 이렇습니다.
문제는 최초 1번 select와 2번 select를 선택하고 내용 추가를 클릭해 폼을 하나 더 추가한 후
추가된 폼의 1번 select를 선택하면 그것이 추가된 2번 select에 이벤트를 발생시켜야 하는데
최초 있었던 폼의 2번 select에 영향을 주는것입니다.
id가 다 같아서 이런 현상이 발생하는것으로 예상은 됩니다만 이 문제를 어떻게 해결해야 할 지
답답해서요;;; 힌트를 좀 주셨으면 감사하겠습니다.
답변 1
말씀 그대로 id를 달리 해 주거나 id 대신 class를 이용해도 될거 같구요.
문제는 새로 생길 폼의 id(class) 이름을 계속 달리해 줄 수있게끔 자바스크립트를 구현하면 될거 같네요.
예를 들어 처음에 sel1 이었다면 추가버튼 누를 때 sel1_1 이 된다거나..하는 식으로 구현하시면 될거 같습니다.
