2 pola wprowadzania autouzupełniania/sugestii przy użyciu jQuery lub Ajax z drugim polem opartym na pierwszych wyborach z wieloma elementami

Oto bardzo prosta procedura. Pokażę tylko główny szkielet. Dodanie mięsa błyskowego będzie po twojej stronie.

Załóżmy, że mamy dwa <select> w ajax.php tak:

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

Więc czego potrzebujemy? Musimy wypełnić drugi <select> w przypadku jego wyboru.

Oto część 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>

Spowoduje to wysłanie żądania do process.php

Teraz nadchodzi process.php

Tutaj potrzebujemy danych do wypełnienia drugiego <select>

Teraz co jest w środku <select> ?

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

Musisz wypisać coś takiego:

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

Wartość i tekst w środku wypełniają Twoje potrzeby.

Jak wynika z bazy danych:

• Możesz uzyskać wartość wyboru rodzica w process.php z $_GET['parentValue']
• Z tą wartością przeprowadź zapytanie do bazy danych
• Następnie z wyniku zwróconego z bazy danych użyj pętli while , foreach lub for (w zależności od sposobu, w jaki go pobierasz), ustaw <option value="someValue">someText</option> .
• Gotowe!

W przypadku wielokrotnego wyboru

aby życie było trochę łatwiejsze, możesz użyć wybranego wielokrotnego wyboru

Porada

mysql_* jest przestarzałe. zamiast tego użyj PDO. Oto link do samouczek