基于先前选择的下拉选项

时间:2017-01-24 02:59:30

标签: php database drop-down-menu

我希望这是一个简单的解决方案。我试图让第一个下拉确定第二个可用的选项。在我的数据库中,饮料类型的每种风味都将“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);
?>

1 个答案:

答案 0 :(得分:0)

我有根据他们的州获取城市的示例代码。我用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');
    }
});