web-dev-qa-db-fra.com

Remplir une zone de sélection à l'aide de JQUERY, AJAX et PHP

J'ai posté une question plus tôt et je n'ai pas eu beaucoup de chance, j'espère effacer le contenu d'une deuxième liste déroulante et repeupler la liste déroulante, en fonction de la valeur qui se trouve dans la première liste déroulante.

J'ai les cases de sélection suivantes comme indiqué ci-dessous:

   <select name = "car" id="Cars" onchange="myFunction(this)">
            <option value="0">Toyota</option>
            <option value="1">Audi</option>
            <option value="2">Suzuki</option>
   </select>

Sous cette liste déroulante, j'ai également une autre liste déroulante pour les modèles:

    <select id="emptyDropdown">
            <option value="0">R8</option>
            <option value="1">Quattro</option>
            <option value="2">A6 hatchback</option>
    </select>

onchange Je veux effacer la deuxième liste déroulante et la remplir avec des modèles liés à la marque de la voiture. PAR EXEMPLE.

Audi - A8, A6, A4 etc.
Suzuki - Swift, Panda etc.


<script>
  function myFunction(obj)
  {
    $('#emptyDropdown').empty()
    var dropDown = document.getElementById("carId");
    var carId = dropDown.options[dropDown.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "/project/main/getcars",
            data: { 'carId': carId  },
            success: function(msg){
                ?????????
            }
        });
  }
</script>

J'ai ensuite la fonction PHP comme ci-dessous (j'utilise codeigniter) - cette fonction utilise l'ID de voiture et retourne une liste de tous les modèles comme ci-dessous:

public function getCars(){
        $this->load->model('car_model');

        $this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');

        if($this->form_validation->run()){
            $carId = $this->input->post('carId');
            $carModels = $this->user_management_model->getCarModels($carId);
        } else {
            echo "error";
        }   
}

Je ne sais alors pas comment retourner chaque élément du tableau produit en PHP, pour repeupler la liste déroulante avec ID = "emptyDropdown". Le tableau généré en PHP a la structure suivante:

Array ( [0] => Array ( [ModelName] => R8 V6 Twin Turbo [ModelID] => 19 ) [1] => Array ( [ModelName] => A6 Hatchback  [ModelID] => 107 ) )

Pour clarifier la question - comment pourrais-je prendre chaque élément du tableau et le mettre comme nouvelle option dans la liste déroulante? existe-t-il un moyen de retourner le tableau en javscript, puis de repeupler dans la méthode de réussite de l'appel ajax?

Toute aide serait très appréciée, merci d'avance

javascriptphpjqueryajaxcodeigniter
12
TotalNewbie

Cette réponse apporte les modifications nécessaires à votre code.

AVIS DE NON-RESPONSABILITÉ: Sans voir l'installation exacte, sachez qu'il peut y avoir une variété de facteurs qui empêchent cela de fonctionner "tel quel" dans votre installation. Je ne sais pas comment vos routes sont configurées, ou si vous utilisez Firebug ou une autre console pour regarder les appels ajax, mais cela devrait vous donner les éléments de base:

Tout d'abord, changez votre php en sortie le tableau sous forme de chaîne codée json:

public function getCars(){
        $this->load->model('car_model');

        $this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');

        if($this->form_validation->run()){
            $carId = $this->input->post('carId');
            $carModels = $this->user_management_model->getCarModels($carId);
            // Add below to output the json for your javascript to pick up.
            echo json_encode($carModels);
            // a die here helps ensure a clean ajax call
            die();
        } else {
            echo "error";
        }   
}

Ensuite, modifiez votre appel ajax de script pour avoir un rappel réussi qui obtient les données et les ajoute à votre liste déroulante:

function myFunction(obj)
  {
    $('#emptyDropdown').empty()
    var dropDown = document.getElementById("carId");
    var carId = dropDown.options[dropDown.selectedIndex].value;
    $.ajax({
            type: "POST",
            url: "/project/main/getcars",
            data: { 'carId': carId  },
            success: function(data){
                // Parse the returned json data
                var opts = $.parseJSON(data);
                // Use jQuery's each to iterate over the opts value
                $.each(opts, function(i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#emptyDropdown').append('<option value="' + d.ModelID + '">' + d.ModelName + '</option>');
                });
            }
        });
  }

Encore une fois - ce sont les blocs de construction. Utilisez votre console de navigateur ou un outil tel que Firebug pour regarder la demande AJAX, et les données renvoyées, afin que vous puissiez les modifier selon les besoins. Bonne chance!

24
cale_b