2 boîtes de saisie semi-automatique/suggestion utilisant jQuery ou Ajax avec une deuxième boîte basée sur les premières sélections avec plusieurs éléments

Voici une procédure très simple. Je vais juste montrer le squelette principal. L'ajout de viande flash sera de votre part.

Supposons que nous ayons deux <select> dans ajax.php comme ceci :

   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

Alors, de quoi avons-nous besoin ? Nous devons remplir le 2ème <select> sur événement de sa sélection.

Voici la partie javascript (ajax.php)

<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

Cela enverra la requête à process.php

Vient maintenant le process.php

Ici, nous avons besoin des données pour remplir le 2ème <select>

Maintenant, que se passe-t-il à l'intérieur de <select> ?

<option value="someValue">someText</option>

Vous devez afficher quelque chose comme ceci :

    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

La valeur et le texte à l'intérieur se remplissent de vos besoins.

Comme il viendra de la base de données :

• Vous pouvez obtenir la valeur de sélection du parent dans process.php avec $_GET['parentValue']
• Avec cette valeur, interrogez la base de données
• Ensuite, à partir du résultat renvoyé par la base de données, utilisez une boucle while , foreach ou for (selon la façon dont vous le récupérez), faites le <option value="someValue">someText</option> .
• vous avez terminé !

Pour la sélection multiple

pour vous faciliter un peu la vie, vous pouvez utiliser multiselect choisi

Un conseil

mysql_* est obsolète. utilisez plutôt PDO. Voici un lien vers un tutoriel