web-dev-qa-db-fra.com

Comment remplir une liste déroulante fiable en utilisant Ajax et php

Bonjour, je veux gérer les données dans le menu déroulant avec Ajax.

Champs de base de données:

1.id

2.nom

3. département 

myDesgin.php 

     <select id="id"></select>
     <select id="name"></select>
     <select id="department"></select>

1.Si j'ai sélectionné un menu déroulant pour en modifier d'autres, ceux-ci dépendent de la valeur sélectionnée à l'aide de Ajax.

2.Y at-il du code disponible, si je sélectionne un menu déroulant, accédez à une autre fenêtre enfant et affichez les données sous forme de tableau (comme un rapport) à l’aide de Ajax .

Merci d'avance.

Donnez-moi s'il vous plaît exemple de code, parce que je suis débutant à ajax, bienvenue si quelqu'un fournit une explication avec le code (pour ajax).

phpjqueryajax
5
Lydia

Oui, vérifiez le code ajax jQuery suivant. Dans cet exemple, si vous changez "Département", la liste déroulante "Nom" sera alors affichée.

$(document).on("change", '#department', function(e) {
            var department = $(this).val();
            

            $.ajax({
                type: "POST",
                data: {department: department},
                url: 'admin/users/get_name_list.php',
                dataType: 'json',
                success: function(json) {

                    var $el = $("#name");
                    $el.empty(); // remove old options
                    $el.append($("<option></option>")
                            .attr("value", '').text('Please Select'));
                    $.each(json, function(value, key) {
                        $el.append($("<option></option>")
                                .attr("value", value).text(key));
                    });														
	                

                    
                    
                }
            });

        });

19
Nilesh Dharmik

Je suppose que tu peux faire ça:

crée une fonction globale qui accepte deux arguments, currElem, nextElem et dataObj:

function dynoDropdowns(currElem, nxtElem, dataObj){
    $.ajax({
        url:"path/to/file",
        type:"post",
        data:dataObj,
        dataType:"json", // <-------------expecting json from php
        success:function(data){
           $(nxtElem).empty(); // empty the field first here.
           $.each(data, function(i, obj){
               $('<option />',
               {
                   value:obj.value,
                   text:obj.text
               }
                ).appendTo(nxtElem);
           });
        },
        error:function(err){
           console.log(err);
        }
    });
}

maintenant, vos événements de changement sont:

$(function(){
    $('select').on('change', function(e){
        if(this.id === "id"){
          var dataObj = {id:this.value};
          dynoDropdowns(this, '#name', dataObj);
        }else if(this.id === "name"){
          var dataObj = {name:this.value};
          dynoDropdowns(this, '#department', dataObj);
        }
    });
});
3
Jai

étant donné select1 et select2 comme ceci:

<select id="select1">
    <option id="11" value="x">X</option>
    <option id="12" value="y">Y</option>
</select>
<select id="select2">
    <option id="21" value="1">1</option>
    <option id="22" value="2">2</option>
</select>

alors vous pouvez faire quelque chose comme ça avec jQuery:

$('#select1').on('change', function() {
    $.ajax({
        url: "test.html",
    }).done(function(response) {
        $('#select2').html(response);
});

Cela suppose que votre appel ajax retourne une chaîne comme

<option id="21" value="3">3</option><option id="22" value="4">4</option>

à partir de votre fichier côté serveur. Si vous retournez un JSON, vous devez d'abord le décoder, mais c'est l'essentiel. Jetez un oeil à la jQuery ajax () function

0
user3154108