selectbox,label 동적
본문
(db에 후염/선택/선택으로 넣어놓은 상황)
첫번째 셀렉트박스(후염)를 클릭한 후 두번째 선택을 누르면 자동으로 3번째꺼까지 나오게 됩니다.
위와 같이 선택이 나오게 한 후 사용자가 클릭하여 선택하는 방법을 알고 싶습니다.
아래는 index js입니다.
<script>
/*주문품명*/
$(document).ready(function(){
$('#select_zero').on('change', function(){
var select_zero = $(this).val();
if(select_zero){
$.ajax({
type:'POST',
url:'./ajax/information_one.php',
data:'select_zero='+select_zero,
success:function(html){
$('#select_first').html(html);
$('#select_second').html('<option value="">선택</option>');
}
});
}else{
$('#select_first').html('<option value="">선택</option>');
$('#select_second').html('<option value="">선택</option>');
}
});
$('#select_first').on('change', function(){
var select_first = $(this).val();
if(select_first){
$.ajax({
type:'POST',
url:'./ajax/information_one.php',
data:'select_first='+select_first,
success:function(html){
$('#select_second').html(html);
}
});
}else{
$('#select_second').html('<option value="">선택</option>');
}
});
});
</script>
---------------------------------------------
아래는 ajax로 접근하는 information.php입니다.
<?php
include "../db_connect.php";
$select_zero = $_POST['select_zero'];
$select_first = $_POST['select_first'];
if (!empty($select_zero)) {
$date = array();
$sql = "SELECT distinct 사종 FROM information WHERE 염색 = '$select_zero' AND yesno = 1";
$result = mysqli_query($con, $sql);
if($result ->num_rows>0){
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="'.$row['사종'].'">'.$row['사종'].'</option>';
}
}else {
echo '<option value ="">선택 </option>';
}
}
elseif (!empty($select_first)) {
$sql = "SELECT 품명 FROM information WHERE yesno = 1 and 사종 = '$select_first'";
$result = mysqli_query($con, $sql);
if($result ->num_rows>0){
while ($row = mysqli_fetch_assoc($result)) {
echo '<option value="'.$row['품명'].'">'.$row['품명'].'</option>';
}
}else {
echo '<option value ="">선택 </option>';
}
}
?>
이후 selectbox의 데이터들을 where조건을 달아 db에 있는 g당 단가 가격을 가져오고 싶습니다. 데이터들을 여러개 보내서 처리하는 방법을 알고 싶습니다.
답변 1
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다
information.php 파일을 수정하여 가격 정보를 반환하도록 만듭니다
<?php
include "../db_connect.php";
$select_zero = $_POST['select_zero'];
$select_first = $_POST['select_first'];
$select_second = $_POST['select_second'];
if (!empty($select_second)) {
// 이곳에서 DB에서 가격 정보를 가져옵니다.
$sql = "SELECT 가격 FROM information WHERE yesno = 1 AND 사종 = '$select_first' AND 품명 = '$select_second'";
$result = mysqli_query($con, $sql);
if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
$price = $row['가격'];
echo $price;
} else {
echo '가격 정보를 찾을 수 없습니다.';
}
}
?>
다음, JavaScript 부분을 수정하여 선택한 값을 서버에 보내고 가격 정보를 가져오도록 함.
$(document).ready(function () {
$('#select_zero').on('change', function () {
var select_zero = $(this).val();
if (select_zero) {
$.ajax({
type: 'POST',
url: './ajax/information.php',
data: 'select_zero=' + select_zero,
success: function (html) {
$('#select_first').html(html);
$('#select_second').html('<option value="">선택</option>');
}
});
} else {
$('#select_first').html('<option value="">선택</option>');
$('#select_second').html('<option value="">선택</option>');
}
});
$('#select_first').on('change', function () {
var select_first = $(this).val();
if (select_first) {
$.ajax({
type: 'POST',
url: './ajax/information.php',
data: 'select_first=' + select_first + '&select_second=' + $('#select_second').val(),
success: function (price) {
if (price !== '가격 정보를 찾을 수 없습니다.') {
// 가격 정보를 받아와서 처리하거나 출력하는 부분을 작성합니다.
// 예를 들어, 가격을 어딘가에 출력하거나 저장할 수 있습니다.
// $('#price').text(price);
} else {
alert('가격 정보를 찾을 수 없습니다.');
}
}
});
} else {
$('#select_second').html('<option value="">선택</option>');
// 가격 정보를 초기화하거나 숨기는 등의 작업을 수행할 수 있습니다.
}
});
});
오 감사합니다!!
