Ten post omawia wytyczne potrzebne do wygenerowania wartości listy wyboru na podstawie wybranej wartości innego wyboru. CoJak generować dynamiczne listy za pomocą jQuery, PHP i mySQL?
Od tego czasu będziemy używać AJAX (asynchroniczny JavaScript i XML). pozwala uniknąć konieczności odświeżania całej strony, zapewniając płynniejszą obsługę i unikając niepotrzebnych wywołań serwera. Wywołanie AJAX wyśle wybraną wartość rozwijaną do skryptu PHP, który zwróci wszystkie pasujące wartości z tabeli w bazie danych MySQL.
Tutorial do generowania dynamicznych list z jQuery, PHP i mySQL
Poniższy przykład użyje wyimaginowanego scenariusza wyboru rotacji herbaty, gdzie wybierzemy nazwiska osób według twojego ulubionego napoju. Przyjrzyjmy się najpierw kodowi PHP, aby połączyć się z bazą danych i wybrać wartości z tabeli na podstawie parametru GET.
Zestawy pierwszej linii połączenie z bazą danych, po którym następuje zapytanie wybierające, aby zwrócić wartości z tabeli. Wykorzystamy te wartości do uzupełnienia naszej drugiej listy wyboru. Następnie PHP przechodzi przez każdy wiersz tabeli, powtarzając kod HTML dla wybranych opcji.
<? php
$ connection = mysqli_connect ("localhost", "db-username", "db-password", "db-name");
$ selectvalue = mysqli_real_escape_string ($ connection, $ _GET ['svalue']);
mysqli_select_db ($ connection, "db-name");
$ result = mysqli_query ($ connection, "SELECCIONE tbl_drinks.drink_name DE tbl_drinks DONDE tbl_drinks.drink_type = '$ selectvalue'");
echo '<option value = ""> Por favor seleccione ... </option>';
while ($ row = mysqli_fetch_array ($ result))
{
echo '<option value = "'. $ row ['drink_name']. '">'. $ row ['drink_name']. "</option>";
// echo $ row ['drink_type']. "<br/>";
}
mysqli_free_result ($ resultado);
mysqli_close ($ conexión);
?>
Oczywiście będziesz musiał zastąpić wartości połączenia z bazą danych własnymi danymi wraz z nazwami tabel i pól w instrukcji SQL. Zapisz swój plik, np. ajax-getvalues.php i sprawdź, czy wszystko działa, przekazując parametr GET w adresie URL, tj. ajax-getvalues.php? Wartość = kawa.
Możesz użyć zwykłego „echa”, aby wygenerować wartości do przetestowania. Zauważ, że jeśli używasz wartości liczbowych, nie potrzebujesz apostrofy wokół „$selectvalue” w instrukcji SQL.
Wytyczne i instrukcje, co zrobić z kodem HTML dla list wyboru
- Teraz utworzymy dwie listy wyboru i przypiszemy identyfikatory jako „wybór z listy‘ I ‘lista celów‘ w tym przykładzie.
- Nasza pierwsza lista wyboru będzie zawierała podstawowy zestaw opcji.
- Drugi wybór nie ma wartości opcji, ponieważ zostaną one wypełnione przez AJAX.
<select name = "list-select" id = "list-select">
<opción valor = ""> Por favor seleccione .. </option>
<opción valor = "té"> té </option>
<opción valor = "café"> café </option>
<option value = "water"> water </option>
</select>
<select name = "list-target" id = "list-target"> </select>
El jQuery
Now para reunirlo todo. Aquí está la jQuery que escucha el cambio de la lista de selección, realiza la llamada AJAX y completa la selección de destino.
$ (document) .ready (function ($) {
var list_target_id = 'list-target'; // primera selección de lista de identificación
var list_select_id = 'list-select'; // segunda selección de lista de identificación
var initial_target_html = '<valor de opción = ""> Seleccione un color ... </option> '; // Mensaje inicial para selección de destino
$ ('#' + list_target_id) .html (initial_target_html); // Dale al objetivo, selecciona la opción de solicitud
$ ('#' + list_select_id) .change (function (e) {
// Agarre el valor elegido en el primer cambio de lista de selección
var selectvalue = $ (this) .val ();
// Mostrar el estado de 'carga' en la lista de selección de destino
$ ('#' + list_target_id) .html ('<option value = ""> Loading ... </option>');
if (selectvalue == "") {
// Mostrar solicitud inicial en selección de destino si se selecciona un valor en blanco
$ ('#' + list_target_id) .html (initial_target_html);
} else {
// Realizar solicitud AJAX, utilizando el valor seleccionado como GET
$ .ajax ({url: 'ajax-getvalues.php? svalue =' + selectvalue,
éxito: función (salida) {
// alerta (salida);
$ ('#' + list_target_id) .html (salida);
}
error: function (xhr, ajaxOptions, thrownError) {
alert (xhr.status + "" + thrownError);
}});
}
});
});
- Najpierw ustawiliśmy się niektóre zmienne dla wybranych identyfikatorów list.
- Wraz z początkową opcją dla naszego wyboru celu, która zachęca użytkownika do dokonania wyboru z początkowego wyboru.
- Następnie konfigurujemy detektor zdarzeń, aby wykryć, kiedy nasza pierwsza lista wyboru zostanie zmieniona i przypisać wybraną wartość do zmiennej „wartość wyboru‘.
- Jeśli wybrano pierwszą opcję „proszę wybrać” (z pustą wartością), druga lista wyboru powróci do początkowego monitu.
- Jeśli wybrana wartość nie jest pusta, to wykonujemy wywołanie AJAX.
- Ustawiliśmy również wartość wyboru celu na „Ładowanie…”, aby użytkownik wiedział, że coś się dzieje.
- To może migać tylko przez chwilę, więc możesz chcieć to wyłączyć.
- Żądania wywołań AJAX nasz skrypt PHPużywając wybranej wartości jako parametru GET.
- Po pomyślnym wykonaniu skryptu.
- Ustawi HTML docelowego wyboru z wartościami opcji, które powtarzamy za pomocą PHP.
- Zawiera również obsługę błędów, która może nam pomóc zidentyfikować jakiekolwiek problemyz łącznością.
