그누보드 QA - 다중(2중) 셀렉트 박스 질문 드립니다.

다중(2중) 셀렉트 박스 질문 드립니다.

별명엄쓰요 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.07.26 16:12:26 조회 8278 (106.♡.♡.34)

본문

구글링 하다 얻어건진 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>

#그누보드5

답변 1

제이앤 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-07-26 16:15:20 122.♡.♡.120

아래의 코드를 한번 참고를 해보시겠어요..

<!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>