Comment puis-je remplir une zone de liste déroulante en fonction de la valeur sélectionnée d'une zone de liste déroulante différente?

Donaldo Galindo

Tout ce que je veux faire est d' envoyer la valeur de l'option sélectionnée à partir slct1de mon cb_insumo_update.phpet aussi remplir slct1avec cb_insumo_update.phpsans avoir besoin de rafraîchir la page ou en utilisant un bouton de formulaire.

J'ai essayé ajax mais je suis un peu nouveau dans ce domaine donc je ne sais pas comment le faire fonctionner.

Le fait est que j'utilise une base de données pour remplir les balises sélectionnées et que je me suis un peu confus en cours de route:

<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);

?>
Rasclatt

J'utiliserai jQuery comme exemple, c'est juste plus facile à assembler que le JavaScript vanilla, vous auriez donc besoin de la bibliothèque jQuery dans votre en-tête (ou en bas de votre page):

<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>

Une note importante, vous voudrez lier des paramètres sur cette requête:

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

Ce n'est pas un moyen sûr d'exécuter des requêtes SQL.

Alternativement, vous pouvez utiliser les méthodes «abrégées» pour l'ajax trouvé sur cette page .

Articles connexes