2단 선택

2단 선택

QA

2단 선택

본문


 <tr>
    <th scope="row"><label for="mb_1">지역</label></th>
    <td colspan="3">
        <select name="mb_1" id="mb_1" onchange="categoryChange(this)">
            <option value="">선택해주세요</option>
            <option value="수도권"<?php echo ($mb['mb_1'] == "수도권본부") ? " selected" : "";?>>수도권</option>
            <option value="강원"<?php echo ($mb['mb_1'] == "강원본부") ? " selected" : "";?>>강원</option>
            <option value="충북"<?php echo ($mb['mb_1'] == "충북본부") ? " selected" : "";?>>충북</option>
            <option value="대전충남"<?php echo ($mb['mb_1'] == "대전충남본부") ? " selected" : "";?>>대전충남</option>
        </select>
    </td>     
</tr>
<tr>
    <th scope="row"><label for="mb_2">상세지역</label></th>
    <td colspan="3">    
        <select name="mb_2" id="mb_2">
        <option value="">선택해주세요</option>
        </select>
    </td>    
</tr>

<script>
function categoryChange(e) {
    var target = document.getElementById("mb_2");
    
    var mb_2_a = [ "인천", "시흥", "동서울", "수원", "군포"];
    var mb_2_b = [ "원주", "홍천", "대관령", "강릉", "양양"];
    var mb_2_c = [ "진천", "충주", "엄정", "제천", "보은", "상주"];
    var mb_2_d = [ "천안", "대전", "영동", "당진", "공주"];
        
    if(e.value == "수도권") var d = mb_2_a;
    else if(e.value == "강원") var d = mb_2_b;
    else if(e.value == "충북") var d = mb_2_c;
    else if(e.value == "대전충남") var d = mb_2_d;
        
    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>

 

여기서 찾아보고 2단 선택을 만들었습니다.
회원가입을 받고 db에 저장도 되는데 회원관리에서 저 부분을 수정을 하려고 하는데 1단은 가입받은 내용이 잘 나오는데, 2번째 선택사항이 회원 가입을 받았을때 내용이 안나오고 '선택해주세요'라고만 나옵니다.
어느 부분이 잘 못 되었는지 조언좀 부탁드리겠습니다.
감사합니다.
 

이 질문에 댓글 쓰기 :

답변 4

작성하신것을 보면요 첫 select에 onchange 명령어로 - 바뀌면 categortChange를 실행시켜라 라고 하셨습니다. 두번째 select는 빈값이고요.

작성자님이 작성한데로 잘못된거 없이 나오는겁니다.

 

회원가입 후 내용을 보이고 싶으시다면 php로 추가 작성하셔야 합니다.

mb_1 값을 토대로 mb_2에 해당되는 도시를 나열 하시고 mb_2값과 같은것을 셀렉트 해둬라 라는

php를 추가 작성하셔야 합니다.

 

두 번째 선택 사항이 회원 가입을 받았을 때 내용이 나오지 않고 "선택해주세요"로 나오는 이유는, 회원 가입 시 선택한 2단계 지역 정보가 해당 페이지로 전달되지 않아서입니다.

따라서 회원 가입 시 선택한 2단계 지역 정보를 해당 페이지로 전달하는 코드를 추가해야 합니다.

  1. 회원 가입 시 선택한 2단계 지역 정보를 세션에 저장합니다.
    
    // 회원 가입 페이지에서 선택한 2단계 지역 정보를 세션에 저장
    session_start(); // 세션 시작
    $_SESSION['mb_2'] = $_POST['mb_2']; // 2단계 지역 정보 저장
    
  2. 회원 관리 페이지에서 세션에 저장된 2단계 지역 정보를 가져와서 해당 select 태그에 적용합니다.

<!-- 상세지역 select 태그 -->
<select name="mb_2" id="mb_2">
    <option value="">선택해주세요</option>
    <?php
    // 세션에서 2단계 지역 정보를 가져와서 선택한 옵션으로 표시
    session_start();
    $selected_mb_2 = $_SESSION['mb_2'];
    $mb_2_list = array();
    if ($mb_1_selected == "수도권") $mb_2_list = array("인천", "시흥", "동서울", "수원", "군포");
    elseif ($mb_1_selected == "강원") $mb_2_list = array("원주", "홍천", "대관령", "강릉", "양양");
    elseif ($mb_1_selected == "충북") $mb_2_list = array("진천", "충주", "엄정", "제천", "보은", "상주");
    elseif ($mb_1_selected == "대전충남") $mb_2_list = array("천안", "대전", "영동", "당진", "공주");
    foreach ($mb_2_list as $mb_2) {
        $selected = ($mb_2 == $selected_mb_2) ? " selected" : "";
        echo "<option value=\"$mb_2\"$selected>$mb_2</option>";
    }
    ?>
</select>

위와 같이 수정하면 회원 가입 시 선택한 2단계 지역 정보가 세션에 저장되고, 해당 페이지에서 세션에 저장된 정보를 가져와서 select 태그에 적용할 수 있습니다.

참고 : 챗GPT

<script>

 

window.onload = function(){

    var e = document.getElementById('mb_1');

    var text = e.options[e.selectedIndex].value;

    var event = new Event('change', { bubbles: true });

    e.dispatchEvent(event);

}

 

function categoryChange(e) {

    var target = document.getElementById("mb_2");

   

    var mb_2_a = [ "인천", "시흥", "동서울", "수원", "군포"];

    var mb_2_b = [ "원주", "홍천", "대관령", "강릉", "양양"];

    var mb_2_c = [ "진천", "충주", "엄정", "제천", "보은", "상주"];

    var mb_2_d = [ "천안", "대전", "영동", "당진", "공주"];

       

    if(e.value == "수도권") var d = mb_2_a;

    else if(e.value == "강원") var d = mb_2_b;

    else if(e.value == "충북") var d = mb_2_c;

    else if(e.value == "대전충남") var d = mb_2_d;

       

    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>

 

이렇게 한번 해보세요~

 

 

var isFirst = true;

function categoryChange(e) {

    var target = document.getElementById("mb_2");

   

    var mb_2_a = [ "인천", "시흥", "동서울", "수원", "군포"];

    var mb_2_b = [ "원주", "홍천", "대관령", "강릉", "양양"];

    var mb_2_c = [ "진천", "충주", "엄정", "제천", "보은", "상주"];

    var mb_2_d = [ "천안", "대전", "영동", "당진", "공주"];

       

    if(e.value == "수도권") var d = mb_2_a;

    else if(e.value == "강원") var d = mb_2_b;

    else if(e.value == "충북") var d = mb_2_c;

    else if(e.value == "대전충남") var d = mb_2_d;

       

    target.options.length = 0;

    for (x in d) {

        var opt = document.createElement("option");

        opt.value = d[x];

        opt.innerHTML = d[x];

        target.appendChild(opt);

 

        if( isFirst == true &&  d[x] == "<?=echo $mb['mb_2']?>"  ){

            isFirst = false;

            opt.selected = true;

        }

 

    }

}

 

이렇게 한번 해보세요~

답변을 작성하시기 전에 로그인 해주세요.
전체 17
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT