셀렉트박스 다중 출력? 질문드립니다.
본문
도움주신 덕분에 이전 문제사항은 해결 하였습니다. 정말 감사합니다. 추가적인 질문이 있어 도움을 구해봅니다..
<select onchange="categoryChange(this)">
<option>전화번호</option>
<?php
$sql = "SELECT mb_id, mb_1 FROM {$g5['member_table']} WHERE mb_1 !='' ";
$result = sql_query($sql);
while ($row = sql_fetch_array($result)) {
echo "<option value='" . $row['mb_1'] . "'>" . $row['mb_1'] . " </option>";
}
?>
</select>
현재 해당 코드를 이용하여 셀렉트박스 에 모든 전화번호가 불러와 지고 있습니다.
셀렉트박스2를 생성하여 셀렉트박스1에서 불러온 전화번호를 선택하면 해당 전화번호(mb_1)의 값과 일치하는 주소(mb_2)만 출력되도록 만들고 싶습니다.
구글링하다 발견한 코드
<select id="good">
<option>찾아오시는길</option>
</select>
<script>
function categoryChange(e) {
var good_a ='주소 출력부분?'
var target = document.getElementById("good");
if(e.value == "셀렉트박스1전화번호 입력부분?") var d = good_a;
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>
해당 코드를 활용하여 value 값에 셀렉트1값을 넣고 var good_a 부분에 해당 전화번호(mb_1)값과 일치하는 주소(mb_2)값을 출력하도록 하고싶은데 힌트좀 주실수 있을까요?
아니면 다른 참고할 코드가 있다면 알려주시면 도움이 많이 될거 같습니다!
답변 2
이건 1번을 선택해서 서버요청 > 1번과 일치하는 데이터를 가져와서 출력해야 하며 ajax를 이용하셔야 합니다.
아래 코드로 교체해주세요
<select id="phoneSelect">
<option value="">전화번호</option>
<?php
$sql = "SELECT mb_id, mb_1 FROM {$g5['member_table']} WHERE mb_1 !=''";
$result = sql_query($sql);
while ($row = sql_fetch_array($result)) {
echo "<option value='" . $row['mb_1'] . "'>" . $row['mb_1'] . "</option>";
}
?>
</select>
<select id="addressSelect">
<option value="">주소</option>
</select>
<script>
$(document).ready(function() {
$('#phoneSelect').change(function() {
var selectedPhone = $(this).val();
$.ajax({
type: 'POST',
url: 'get_address.php',
data: { phone: selectedPhone },
success: function(response) {
$('#addressSelect').html(response);
}
});
});
});
</script>
이제 index.php 파일이 있는 최상단에 get_address.php 파일을 생성해주세요
만약 폴더 설정하실거면 위 스크립트 ajax요청 경로도 변경하셔야 합니다.
잘 모르겠다?하심 수정하지마시고 최상단에 설정하시면 됩니다
<?php
include_once('./_common.php'); // 그누보드 공통 파일
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['phone'])) {
$phone = sql_real_escape_string($_POST['phone']);
$sql = "SELECT mb_2 FROM {$g5['member_table']} WHERE mb_1 = '{$phone}'";
$result = sql_query($sql);
$options = "<option value=''>주소</option>";
while ($row = sql_fetch_array($result)) {
$options .= "<option value='" . $row['mb_2'] . "'>" . $row['mb_2'] . "</option>";
}
echo $options;
}
?>
이야~ 정말 깔끔하게 해결되었습니다 감사합니다 !!
엄지척이 모자라네요 쌍엄지척 입니다 !!!! 많이 배웠습니다 . 다시한번 감사드립니다 (__) ❤️
추가 질문 하나 드려도 될까요ㅜㅜ
번호(mb_1)와 주소(mb_2)가 일치하는
대표자이름(mb_3)을 셀렉트박스로 불러오게 하려고 하는데
셀렉박스 창을
<select id="addressSelect"> <select id="addressSelect2">이런식으로 2개 만들고
스크립트 부분 데이터에서
data: { phone: selectedPhone phone2: selectedPhone2 }
이렇게 변경한뒤
get.address.php 에서는
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['phone']) && 'POST' && isset($_POST['phone2'])) {
$phone = sql_real_escape_string($_POST['phone']);
$phone2 = sql_real_escape_string($_POST['phone2']);
$sql = "SELECT mb_3 FROM {$g5['member_table']} WHERE mb_1 = '{$phone}' && mb_2 = '{$phone2}'";
$result = sql_query($sql);
$options = "<option value=''>업체명</option>";
while ($row = sql_fetch_array($result)) {
$options .= "<option value='" . $row['mb_3'] . "'>" . $row['mb_3'] . "</option>";
}
이렇게 수정해 보았는데 작동을 안하네요
어디가 잘못되었는지 지적 부탁드립니다 !
data: { phone: selectedPhone phone2: selectedPhone2 }
콤마빠졌습니다.
data: { phone: selectedPhone, phone2: selectedPhone2 }
콤마를 넣어도 작동이 안되서 그러는데 코드한번 봐주시면 정말 감사하겠습니다 !
<script>
$(document).ready(function() {
$('#phoneSelect').change(function() {
$('#phoneSelect2').change(function(){
var selectedPhone = $(this).val();
var selectedPhone2 = $(this).val();
$.ajax({
type: 'POST',
url: 'get_address.php',
data: { phone: selectedPhone, phone2: selectedPhone2},
success: function(response) {
$('#addressSelect').html(response);
}
}
});
});
});
문법이 잘못 되었습니다. 아래 코드로 변경하세요
<select id="phoneSelect">
<option value="">전화번호</option>
<?php
$sql = "SELECT mb_id, mb_1 FROM {$g5['member_table']} WHERE mb_1 !=''";
$result = sql_query($sql);
while ($row = sql_fetch_array($result)) {
echo "<option value='" . $row['mb_1'] . "'>" . $row['mb_1'] . "</option>";
}
?>
</select>
<select id="addressSelect">
<option value="">주소</option>
</select>
<select id="nameSelect">
<option value="">대표자 이름</option>
</select>
<script>
$(document).ready(function() {
$('#phoneSelect').change(function() {
var selectedPhone = $(this).val();
$.ajax({
type: 'POST',
url: 'get_address.php',
data: { phone: selectedPhone },
success: function(response) {
$('#addressSelect').html(response);
$('#nameSelect').html('<option value="">대표자 이름</option>'); // Reset nameSelect
}
});
});
$('#addressSelect').change(function() {
var selectedPhone = $('#phoneSelect').val();
var selectedAddress = $(this).val();
$.ajax({
type: 'POST',
url: 'get_name.php',
data: { phone: selectedPhone, address: selectedAddress },
success: function(response) {
$('#nameSelect').html(response);
}
});
});
});
</script>
get_address.php 최상단에 생성
<?php
include_once('./_common.php'); // 그누보드 공통 파일
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['phone'])) {
$phone = sql_real_escape_string($_POST['phone']);
$sql = "SELECT DISTINCT mb_2 FROM {$g5['member_table']} WHERE mb_1 = '{$phone}'";
$result = sql_query($sql);
$options = "<option value=''>주소</option>";
while ($row = sql_fetch_array($result)) {
$options .= "<option value='" . $row['mb_2'] . "'>" . $row['mb_2'] . "</option>";
}
echo $options;
}
?>
get_name.php 최상단 폴더에 생성
<?php
include_once('./_common.php'); // 그누보드 공통 파일
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['phone']) && isset($_POST['address'])) {
$phone = sql_real_escape_string($_POST['phone']);
$address = sql_real_escape_string($_POST['address']);
$sql = "SELECT mb_3 FROM {$g5['member_table']} WHERE mb_1 = '{$phone}' AND mb_2 = '{$address}'";
$result = sql_query($sql);
$options = "<option value=''>대표자 이름</option>";
while ($row = sql_fetch_array($result)) {
$options .= "<option value='" . $row['mb_3'] . "'>" . $row['mb_3'] . "</option>";
}
echo $options;
}
?>
정말 감사합니다 (__) 정말 많이 배웠습니다 !!
혹시 mb_3 이름중에 중복된 이름이 있어 그런데 중복이름은 하나만 출력 되도록 구현 하려면 어디를 손봐야 할까요?
DISTINCT 으로 해결 했습니다!! 도움주셔서 정말 감사합니다 즐거운 주말 되시길 바랍니다!