2중 셀렉트박스 수정할 때 값 가져오기 질문드립니다.

2중 셀렉트박스 수정할 때 값 가져오기 질문드립니다.

QA

2중 셀렉트박스 수정할 때 값 가져오기 질문드립니다.

답변 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차 셀렉트박스 내용만 들고오긴 한데... 기존에 선택된 내용이 사라지네요 ㅎㅎ;;

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 235
© SIRSOFT
현재 페이지 제일 처음으로