2중 셀렉트박스 수정할 때 값 가져오기 질문드립니다.
본문
1차 선택 셀렉트박스
<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>
<?php if ($remain > 0 || $wr_id > 0) {?> <option value="어린이" <?php echo get_selected($wr_4, '어린이') ?>>어린이</option><?php }?>
<?php if ($remain2 > 0 || $wr_id > 0) {?> <option value="청소년" <?php echo get_selected($wr_4, '청소년') ?>>청소년</option><?php }?>
<?php if ($remain3 > 0 || $wr_id > 0) {?> <option value="성인" <?php echo get_selected($wr_4, '성인') ?>>성인</option><?php }?>
</select>
</br></br><span style="text-align:left"><h1>※ 어린이 : 초등학생, 청소년 : 중·고교생, 성인 : 20세 이상 </h1></span></br>
</div>
2차선택 셀렉트박스
<div class="write_div">
<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>
<label for="wr_5" class="sound_only">신청 도서명</label>
<select name="wr_5" id="book" class="frm_input full_input required">
<option value="">신청할 도서를 선택하세요</option>
<option value="최숙희_네 기분은 어떤 색깔이니?" <?php echo get_selected($wr_5, '최숙희_네 기분은 어떤 색깔이니?') ?>>최숙희_네 기분은 어떤 색깔이니?</option>
<option value="권영세_동백나무가 웃다" <?php echo get_selected($wr_5, '권영세_동백나무가 웃다') ?>>권영세_동백나무가 웃다</option>
<option value="김상삼_약밤나무의 백 년 이야기" <?php echo get_selected($wr_5, '김상삼_약밤나무의 백 년 이야기') ?>>김상삼_약밤나무의 백 년 이야기</option>
<option value="김수빈_고요한 우연" <?php echo get_selected($wr_5, '김수빈_고요한 우연') ?>>김수빈_고요한 우연</option>
<option value="김선미_비스킷" <?php echo get_selected($wr_5, '김선미_비스킷') ?>>김선미_비스킷</option>
<option value="지혜_읽고 쓰고 내가 됩니다" <?php echo get_selected($wr_5, '지혜_읽고 쓰고 내가 됩니다') ?>>지혜_읽고 쓰고 내가 됩니다</option>
<option value="이슬아_가녀장의 시대" <?php echo get_selected($wr_5, '이슬아_가녀장의 시대') ?>>이슬아_가녀장의 시대</option>
<option value="김익한_거인의 노트" <?php echo get_selected($wr_5, '김익한_거인의 노트') ?>>김익한_거인의 노트</option>
<option value="박창원_오늘 보는 그제 뉴-쓰" <?php echo get_selected($wr_5, '박창원_오늘 보는 그제 뉴-쓰') ?>>박창원_오늘 보는 그제 뉴-쓰</option>
<option value="김혜진_툭복을 비는 마음" <?php echo get_selected($wr_5, '김혜진_툭복을 비는 마음') ?>>김혜진_툭복을 비는 마음</option>
</select>
</div>
위 코드로 글 작성하고 수정할 때 입력했던 부분까진 잘 가져 옵니다.
근데 문제는 예를들어 '어린이'일 때 연동된 2차 셀렉트박스의 내용만 들고와야 하는데 지금의 경우엔 전체 목록을 다 보여주고 있습니다.
수정할 때 1차 셀렉트 박스의 내용에 맞게 2차 셀렉트 박스의 내용만 보여주려면 어딜 수정해야 될까요?
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<?php
if (function_exists('get_selected') == false) {
function get_selected($a, $b) {
if ($a == $b) {
return 'selected="selected"';
}
return '';
}
}
$option_data = [
'어린이' => [
"최숙희_네 기분은 어떤 색깔이니?",
"권영세_동백나무가 웃다",
"김상삼_약밤나무의 백 년 이야기"
],
'청소년' => [
"김수빈_고요한 우연",
"김선미_비스킷",
"지혜_읽고 쓰고 내가 됩니다"
],
'성인' => [
"이슬아_가녀장의 시대",
"김익한_거인의 노트",
"박창원_오늘 보는 그제 뉴-쓰",
"김혜진_툭복을 비는 마음"
]
];
$wr_id = 1;
$remain = 0;
$remain2 = 0;
$remain3 = 0;
$wr_4 = '청소년';
$wr_5 = '김선미_비스킷';
?>
<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>
<?php if ($remain > 0 || $wr_id > 0) {?> <option value="어린이" <?php echo get_selected($wr_4, '어린이') ?>>어린이</option><?php }?>
<?php if ($remain2 > 0 || $wr_id > 0) {?> <option value="청소년" <?php echo get_selected($wr_4, '청소년') ?>>청소년</option><?php }?>
<?php if ($remain3 > 0 || $wr_id > 0) {?> <option value="성인" <?php echo get_selected($wr_4, '성인') ?>>성인</option><?php }?>
</select>
</br></br><span style="text-align:left"><h1>※ 어린이 : 초등학생, 청소년 : 중·고교생, 성인 : 20세 이상 </h1></span></br>
</div>
<div class="write_div">
<script>
var option_data = <?php echo json_encode($option_data, JSON_UNESCAPED_UNICODE); ?>;
function categoryChange(e) {
var d = [];
for (var k in option_data) {
if (e.value == k) {
d = option_data[k];
}
}
var target = document.getElementById("book");
target.options.length = 0;
target.options[0] = new Option('신청할 도서를 선택하세요', '');
for (var i = 0; i < d.length; i++) {
target.options[i + 1] = new Option(d[i], d[i]);
}
}
</script>
<label for="wr_5" class="sound_only">신청 도서명</label>
<select name="wr_5" id="book" class="frm_input full_input required">
<option value="">신청할 도서를 선택하세요</option>
<?php
$opts = '';
foreach ($option_data as $k => $arr) {
if ($wr_4 == $k) {
foreach ($arr as $v) {
$opts_selected = get_selected($wr_5, $v);
$opts .= "<option value=\"{$v}\" {$opts_selected}>{$v}</option>";
}
}
}
echo $opts;
?>
</select>
</div>
개인적으로 알지는 못하지만 배르만님께서는 천재임이 틀림없어보입니다 !!!! 감사합니다!!
window.onload = function(){
var e = document.getElementById('wr_4');
var text = e.options[e.selectedIndex].value;
var event = new Event('change', { bubbles: true });
e.dispatchEvent(event);
}
이 스크립트를 추가하니까 1차에서 선택한 값에 대응하는 2차 셀렉트박스 내용만 들고오긴 한데... 기존에 선택된 내용이 사라지네요 ㅎㅎ;;
답변을 작성하시기 전에 로그인 해주세요.