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단계 지역 정보를 해당 페이지로 전달하는 코드를 추가해야 합니다.
- 회원 가입 시 선택한 2단계 지역 정보를 세션에 저장합니다.
// 회원 가입 페이지에서 선택한 2단계 지역 정보를 세션에 저장 session_start(); // 세션 시작 $_SESSION['mb_2'] = $_POST['mb_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;
}
}
}
이렇게 한번 해보세요~