如何根據其他組合框的選定值填充組合框？

Question

我要做的就是在我的cb_insumo_update.php發送從slct1中選擇的選項的值，並用cb_insumo_update.php填充slct1 ，而無需刷新頁面或使用表單按鈕。

我嘗試過ajax，但是對它有些陌生，所以我不知道如何使它起作用。

事實是，我正在使用數據庫填充選擇標簽，並且在使用過程中有些困惑：

<section class="container">

    <div class="row" >

      <div class="input-field  col s12" >
        <select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
          <?php  require('php/cb_categoria_update.php');  ?>
        </select>
        <label>Categoría</label>
      </div>


      <div class="input-field col s12" method="GET">
        <select id="slct2" name="slct2">
         </select>  
        <label>Insumo</label>
      </div>

    </div>
</section>

cb_categoria_update

<?php 

require('Connect.php');

$CB_cate = mysqli_query($enlace,"SELECT * FROM vw_display_catego_insumo");

    echo "<option empty disabled selected>Elija una opción</option>";

while($row = mysqli_fetch_array($CB_cate))
{
    $idcat = $row['fn_idCategoInsumo'];
    $nomcat = $row['fc_NomCategoInsumo'];


    echo "<option value='" . $idcat . "'>" . $nomcat . "</option>";

}


mysqli_close($enlace);

?> 

cb_insumo_update

<?php 

require('Connect.php');


 $cateinsumo=$_POST['cbidcategoria'];


    $spinsumo="call SP_INSUMOS_BY_CAT('".$_POST['cbidcategoria']."')";

    $sqlspinsumo = mysqli_query($enlace, $spinsumo); 

    $sqlarray = mysqli_fetch_array($sqlspinsumo);


    echo "<option disabled selected>Elija una opción</option>";



while($row = mysqli_fetch_array($sqlspinsumo))
{
    $idinsumo = $row['fn_IdInsumo'];
    $nominsumo= $row['fc_NomInsumo'];

    echo "<option value='" . $idinsumo . "'>" . $nominsumo . "</option>";

}


mysqli_close($enlace);

?>

Answer 1

我將以jQuery為例，它比普通的JavaScript更容易組合在一起，因此您需要在標頭（或頁面底部）中使用jQuery庫：

<section class="container">
    <div class="row" >
      <div class="input-field col s12" >
        <select id="slct1" name="slct1">
          <!-- You can keep this as is -->
          <?php require('php/cb_categoria_update.php');  ?>
        </select>
        <label>Categoría</label>
      </div>
      <div class="input-field col s12" method="GET">
        <!-- Use a jQuery event listener instead of the inline onchange -->
        <select id="slct2" name="slct2">
         </select>  
        <label>Insumo</label>
      </div>
    </div>
</section>

<script>
// Document ready
$(function(){
    // Listen for change on first drop down
    $('#slct1').on('change', function(){
        // Run ajax
        $.ajax({
            // Set the url for the file you want to load into current page
            'url': 'cb_insumo_update.php',
            // You could use GET here, I just use post
            'type': 'post',
            // Fetch the value of the current selected option
            'data': $(this).val(),
            // Take the html result from the php page
            'success': function(response) {
                // Place it into this page
                $('#slct2').html(response);
            }
        });
    });
});
</script>

重要說明，您將希望在此查詢上綁定參數：

$spinsumo="call SP_INSUMOS_BY_CAT('".$_POST['cbidcategoria']."')";

這不是運行SQL查詢的安全方法。

或者，您可以對在此頁面上找到的ajax執行“快捷”方法。