이전 선택을 기반으로 한 드롭 다운 옵션

Question

나는 이것이 간단한 해결책이라고 희망하고 있습니다. 첫 번째 드롭 다운을 사용하여 두 번째 옵션을 사용할 수 있는지 확인하려고합니다. 내 데이터베이스에서 음료 유형의 각 맛은 "type_id"열이 정수 (예 : 1,2,3)로 설정되어 있습니다. 정수는 속한 범주를 나타 내기위한 것입니다. 내가 결정한 "type_id"에서 두 번째 드롭 다운에 사용할 수있는 옵션을 기반으로하는 것이 가능합니까?

PHP를 사용하여이 작업을 수행하고 싶었지만 jQuery에 반대하지 않았습니다. 나는 다른 것에 대해 잘 알고 있지 않습니다. 사전에 도와 주셔서 감사합니다!

<?php 
require "db-connect.php"; 
$dtype = "SELECT name FROM drinktype"; 
$typedata = mysqli_query($connection, $dtype); 

    echo "<select id='slctType'>"; 
if (mysqli_num_rows($typedata) > 0) { 
while($row = mysqli_fetch_assoc($typedata)) { 

echo "<option value='{".$row['name']."}'>".$row['name']."</option>"; 
} 
} 
echo "</select>"; 

$dflavor = "SELECT type_id,name FROM drinkflavor"; 
$flavordata = mysqli_query($connection, $dflavor); 


    echo "<select id='slctFlavor' "; 
if (mysqli_num_rows($flavordata) > 0) { 
while($row = mysqli_fetch_assoc($flavordata)) { 

echo "<option value='{".$row['name']."}'>".$row['name']."</option>"; 
} 
} 
echo "</select>"; 
mysqli_close($connection); 
?> 

Answer 1

도시별로 상태를 가져올 수있는 샘플 코드가 있습니다. 나는 아약스, jquery와 PHP 코드를 가지고있다. 나는 비슷한 유형의 요구 사항을 가지고 있다고 생각합니다. 귀하의 요구 사항에 대한 아래의 코드 개념을 시도해보십시오.

$(document).on('change','#state',function() { 
    $('#city').remove(); 
    if($(this).val() != 'none') 
    { 
     var state_id = $(this).val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'page.php', 
      data: { state_id: state_id }, 
      success: function (city_response) { 
       if(city_response == '') 
       { 
        return false; 
       } 
       else 
       { 
        var city = '<select name="city" id="city" class="form-control">'; 
        city += '<option value="-----">Please select any City</option>'; 
        $.each(city_response, function (ck, cv) { 
         city += '<option value="' + cv['city_id'] + '">' + cv['city_name'] + '</option>'; 
        }); 
        city += '</select>'; 
        $("#city_div").css('display', 'block'); 
        $('#cities').append(city); 
       } 
      } 
     }) 
    } 
    else 
    { 
     $("#city_div").css('display', 'none'); 
    } 
});