以前の選択に基づくドロップダウンオプション

Question

これは簡単な解決策だと思っています。最初のドロップダウンで2番目のオプションを使用できるかどうかを判断しようとしています。私のデータベースでは、飲み物タイプの各フレーバに整数（つまり1,2,3）として設定された「type_id」列があります。整数は、それらが属するカテゴリを反映するためのものです。私が決定した "type_id"の2番目のドロップダウンのための利用可能なオプションをベースにすることは可能ですか？

私はこれを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'); 
    } 
});