다중(2중) 셀렉트 박스 질문 드립니다.
본문
구글링 하다 얻어건진 2단 셀렉트박스 입니다. html 에서는 잘 되는데 보시면 아시겠지만
2단 셀렉트박스는 저장하는 부분이 없습니다.;;
어떻게 처리를 해야될까요? 많은 도움이 필요합니다.ㅠㅠ
1단 셀렉트 박스(wr_4에 저장됨)
<div class="write_div">
<label for="wr_4" class="sound_only">참가부문</label>
<select id="wr_4" name="wr_4" class="frm_input full_input required" onchange="categoryChange(this)">
<option value="">참가부문</option>
<option value="어린이" <?php echo get_selected($wr_4, '어린이') ?>>어린이(잔여팀 - <?php echo $remain; ?>팀)</option>
<option value="청소년" <?php echo get_selected($wr_4, '청소년') ?>>청소년(잔여팀 - <?php echo $remain2; ?>팀)</option>
<option value="성인" <?php echo get_selected($wr_4, '성인') ?>>성인(잔여팀 - <?php echo $remain3; ?>팀)</option>
</select>
</div>
2단 셀텍트박스(wr_5에 저장할 예정....)
<div class="write_div">
<label for="wr_3" class="sound_only">신청 도서명</label>
<select name="SDIV" id="book" class="frm_input full_input required">
<option>신청할 도서를 선택하세요</option>
</select>
<script>
function categoryChange(e) {
var book_a = ["신청할 도서를 선택하세요", "최숙희_네 기분은 어떤 색깔이니?", "권영세_동백나무가 웃다", "김상삼_약밤나무의 백 년 이야기"];
var book_b = ["신청할 도서를 선택하세요", "김수빈_고요한 우연", "김선미_비스킷", "지혜_읽고 쓰고 내가 됩니다"];
var book_c = ["신청할 도서를 선택하세요", "이슬아_가녀장의 시대", "김익한_거인의 노트", "박창원_오늘 보는 그제 뉴-쓰", "김혜진_툭복을 비는 마음"];
var target = document.getElementById("book");
if(e.value == "어린이") var d = book_a;
else if(e.value == "청소년") var d = book_b;
else if(e.value == "성인") var d = book_c;
target.options.length = 0;
for (x in d) {
var opt = document.createElement("option");
opt.value = d[x];
opt.innerHTML = d[x];
target.appendChild(opt);
}
}
</script>
</div>
답변 1
아래의 코드를 한번 참고를 해보시겠어요..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-select box example</title>
</head>
<body>
<form method="post" action="your_save_script.php">
<div class="write_div">
<label for="wr_4" class="sound_only">참가부문</label>
<select id="wr_4" name="wr_4" class="frm_input full_input required" onchange="categoryChange(this)">
<option value="">참가부문</option>
<option value="어린이">어린이(잔여팀 - 5팀)</option>
<option value="청소년">청소년(잔여팀 - 3팀)</option>
<option value="성인">성인(잔여팀 - 2팀)</option>
</select>
</div>
<div class="write_div">
<label for="wr_5" class="sound_only">신청 도서명</label>
<select name="wr_5" id="book" class="frm_input full_input required">
<option>신청할 도서를 선택하세요</option>
</select>
</div>
<button type="submit">저장하기</button>
</form>
<script>
function categoryChange(e) {
var book_a = ["신청할 도서를 선택하세요", "최숙희_네 기분은 어떤 색깔이니?", "권영세_동백나무가 웃다", "김상삼_약밤나무의 백 년 이야기"];
var book_b = ["신청할 도서를 선택하세요", "김수빈_고요한 우연", "김선미_비스킷", "지혜_읽고 쓰고 내가 됩니다"];
var book_c = ["신청할 도서를 선택하세요", "이슬아_가녀장의 시대", "김익한_거인의 노트", "박창원_오늘 보는 그제 뉴-쓰", "김혜진_툭복을 비는 마음"];
var target = document.getElementById("book");
var d = [];
if(e.value == "어린이") d = book_a;
else if(e.value == "청소년") d = book_b;
else if(e.value == "성인") d = book_c;
target.options.length = 0;
for (var i = 0; i < d.length; i++) {
var opt = document.createElement("option");
opt.value = d[i];
opt.innerHTML = d[i];
target.appendChild(opt);
}
}
</script>
</body>
</html>
엇.. 저장까진 잘 됩니다. 근데, 저장된 걸 다시 가져오려면 어딜 손 봐야 할까요?
해결 했습니다~~ 감사합니다!!!