IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Passer la valeur d'un SELECT à un autre SELECT [AJAX]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Autre
    Inscrit en
    Novembre 2019
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Autre
    Secteur : Distribution

    Informations forums :
    Inscription : Novembre 2019
    Messages : 14
    Par défaut Passer la valeur d'un SELECT à un autre SELECT
    Dans le même formulaire,je voudrais passer la valeur sélectionnée dans une première select à une deuxième select sous forme d'une variable php, sans soumettre pour autant le formulaire grâce à ajax.

    La 1ère select affiche la liste des marques de voiture, ex :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <select name="BRAND" id="BRAND">
    	<option value="Audi">Audi</option>
    	<option value="BMW">BMW</option>
    	<option value="MERCEDES">MERCEDES</option>
    </select>

    Pour récupérer la valeur de la marque j'utilise le code js suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script>
    jQuery(document).ready(function($){
        $("#BRAND").change(function() {
           var selectedbrand = $("#BRAND").val();
     
    jQuery.ajax({
            type: 'GET',
            url: 'mysite.com/script/myscript.php',
            data: {selectedbrand:selectedbrand},
            success: function(data) {
            console.log(data);
            }
        });
     
        }); 
    });
    </script>
    et le script myscript.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <?php
    $selectedbrand = $_GET['selectedbrand'];
    ?>
    Le code fonctionne car si dans function(data) je rajoute alert($selectedbrand) je récupère bien la valeur de la marque sélectionnée.

    En revanche, $selectedbrand n'est pas interprétée dans ma deuxième select qui après selection de la marque devrait afficher la liste des voitures lui correspondant.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name="CAR" id="CAR">...</select>
    Pour cette deuxième select la liste des voitures est obtenue dynamiquement en php en :
    - utilisant $selectedbrand comme variable php pour remonter la marque sélectionnée
    - réinjectant $selectedbrand dans une requête SQL
    - parsant le résultat de la requête pour afficher les <options></options>

    Cette partie fonctionne car si je force en dur dans ce code php la valeur de $selectedbrand (ex $selectedbrand= 'BMW') j'affiche bien la liste des voitures BMW.

    Donc comment puis-je récuperer $selectedbrand dans le code php de ma deuxième select ?

    Faut-il revoir le code du js ou du script php exécuté lors d'une selection de la marque ? Ou faut-il modifier le code php de ma select "CAR" ?

    Merci de votre aide

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    tu as fait le plus gros du travail.

    1- Le 2ème <select>, dans ta page :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <select name="CAR" id="CAR">
       <option value="">Sélectionnez une marque</option>
    </select>

    2- c'est dans le fichier myscript.php que tout se passe :
    • tu récupères $_GET['selectedbrand'] ((OK)
    • tu ajoutes le script de connexion à la BDD
    • tu fais la requête SQL nécessaire pour récupérer les voitures de cette marque
    • tu construis les <option> HTML

    3- Dans la fonction Ajax :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    jQuery.ajax({
            type: 'GET',
            url: 'mysite.com/script/myscript.php',
            data: {selectedbrand:selectedbrand},
            dataType: 'html',
            success: function(data) {
    //            console.log(data);
                jQuery.('#CAR').html( data ); // affichage des options dans le select
            }
        });

  3. #3
    Membre averti
    Homme Profil pro
    Autre
    Inscrit en
    Novembre 2019
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Autre
    Secteur : Distribution

    Informations forums :
    Inscription : Novembre 2019
    Messages : 14
    Par défaut
    Merci,

    En d'autres termes je :
    - modifie l'ajax pour recupérer le résultat de myscript.php sous forme html
    - déplace le code php que j'avais mis dans ma select "CAR" au niveau de myscript.php, après avoir récupéré la valeur $selectedbrand, pour générer ma liste d'options

    Malin.

    Mille mercis car je tournais autour du pot depuis un moment.

  4. #4
    Invité
    Invité(e)
    Par défaut
    C'est le principe même d'Ajax.

  5. #5
    Membre averti
    Homme Profil pro
    Autre
    Inscrit en
    Novembre 2019
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Autre
    Secteur : Distribution

    Informations forums :
    Inscription : Novembre 2019
    Messages : 14
    Par défaut
    Bonjour,

    J'ai enfin réussi à afficher dans la deuxième select la liste des voitures en utilisant le script suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    jQuery(function($){
    	var selectize1 = $('#Brand')[0].selectize;
    	var selectize2 = $('#Car')[0].selectize;
     
    	selectize1.on('change', function() { 
    		selectize2.clearOptions();
     
    		selectize2.load(function(callback){
    			$.ajax({
    				dataType: 'json',
    				url: 'https://mywebsite.com/myscript.php',
    				success: function(results) {
    					callback(results);
    				}
    			});
    		});
    	})
    });
    Au niveau du script php, j'arrive à me connecter à la base de donnée et à jouer une requête sql dont je reprends le résultats sous forme d'array

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $jsonData = array();
    foreach ($results as $result)
    	{
    		$jsonData[] = array(
    			'value' => $result->Car,
    			'text'  => $result->Car
    		);
    	}
     
    echo json_encode($jsonData);
    die();

    Je sais que ma requête sql fonctionne car si je teste en dur avec where Brand = 'Audi' par exemple, je récupère bien les voitures de la marque Audi dans l'array.

    Ce que je n'arrive pas à faire, c'est récupérer en amont de la requête sql la valeur de la marque provenant de ma première select afin de l'injecter dynamiquement dans la requête.

    ex. $selectedBrand avec la requête where Brand = '$selectedBrand'.

    La requête SQL fonctionne car si j'écris en dur $selectedBrand = 'Audi' j'obtiens les bons résultats.

    Donc comment récupérer la valeur de $selectedBrand suite à l'appel AJAX au script php ?

    J'ai essayé $selectedBrand = $_GET['Brand'] mais en vain.

    Faut-il revoir le code PHP ou le code JS AJAX ?

    Merci de votre aide

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     success: function(data) {
    //            console.log(data);
                jQuery.('#CAR').html( data ); // affichage des options dans le select
            }
    là il semble que la réponse reçue de ton ajax soit le code html des options que tu mets dans la balise select ...

    Dans ton dernier code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    echo json_encode($jsonData);
    ta réponse est un JSON avec les text et value des options ...

    tu as deux possibilités:
    * soit tu modifies ton code coté serveur pour retourner le code html des options ...
    ainsi tu pourras faire comme dans le premier exemple , c'est adire coller directement le retour d'ajax en innerHTML de la balise select

    * soit tu modifies le callback de l'ajax pour exploiter le json reçu et ajouter avec js coté client les options dans le select en parcourant le json
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] passer les valeurs d'un input à l'autre
    Par cablé dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/08/2008, 11h45
  2. problème à passer des valeurs d'une form à l'autre
    Par gibea00 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 07/08/2007, 13h45
  3. passer des valeurs d'une page à l'autre
    Par casaoui dans le forum ASP.NET
    Réponses: 8
    Dernier message: 13/06/2007, 17h55
  4. Passer la valeur d'un champ à un autre
    Par tets88 dans le forum Access
    Réponses: 3
    Dernier message: 16/03/2006, 16h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo