如何根据不同组合框的选定值填充组合框？

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 found on this page 执行“速记”方法。