Параметры раскрывающегося списка на основе предыдущего выбора

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

У меня есть образец кода для извлечения города в соответствии с их состоянием. Я делаю этот код с ajax, 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'); 
    } 
});