Questa pubblicazione tratta le linee guida necessarie per generare i valori di un elenco di selezione in base al valore scelto di un’altra selezione. ¿ Come per generare annunci Dinamicos con jQuery, PHP e MySQL ?
Useremo AJAX (JavaScript asincrono e XML), in quanto ciò evita la necessità di aggiornare l’intera pagina , fornendo un’esperienza utente più fluida ed evitando chiamate inutili al server.
La chiamata AJAX invierà il valore a discesa selezionato a uno script PHP che restituirà tutti i valori corrispondenti da una tabella in un database MySQL.
Come generare elenchi dinamici con jQuery, PHP e mySQL?
L’esempio seguente utilizzerà un immaginario scenario di selezione del rattan di tè, in cui selezioneremo i nomi delle persone in base alla loro bevanda preferita.
Linee guida da fare con PHP
Diamo prima un’occhiata al codice PHP per connettersi al database e selezionare i valori di una tabella basata su un parametro GET.
La prima riga stabilisce la connessione al database , seguita da una query di selezione per restituire i valori di una tabella.
Useremo questi valori per completare il nostro secondo elenco di selezione. PHP passa quindi attraverso ogni riga della tabella, facendo eco all’HTML per le opzioni di selezione.
<? php
$ connection = mysqli_connect ("localhost", "db-username", "db-password", "db-name");
$ selectvalue = mysqli_real_escape_string ($ connessione, $ _GET ['svalue']);
mysqli_select_db ($ connection, "db-name");
$ result = mysqli_query ($ connection, "SELECT tbl_drinks.drink_name FROM tbl_drinks DOVE tbl_drinks.drink_type = '$ selectvalue'");
echo '<option value = ""> Seleziona ... </option>';
while ($ row = mysqli_fetch_array ($ risultato))
{
echo '<option value = "'. $ row ['drink_name']. '">'. $ row ['drink_name']. "</ Option>";
// echo $ row ['drink_type']. "<br/>";
}
mysqli_free_result ($ risultato);
mysqli_close ($ connessione);
?>Ovviamente, è necessario sostituire i valori di connessione al database con i propri dettagli insieme alla tabella e ai nomi dei campi nell’istruzione SQL.
Salvare il file, ad esempio ajax-getvalues.php e verificare che tutto funzioni passando il parametro GET nell’URL, ovvero ajax-getvalues.php ? Svalue = caffè .
È possibile che si desideri utilizzare un ‘eco’ regolare per generare i valori da testare. Nota che se stai usando valori numerici, non hai bisogno degli apostrofi intorno a ‘ $ selectvalue ‘ nell’istruzione SQL.
Linee guida da fare con HTML
- Ora creeremo i due elenchi di selezione e assegneremo gli ID come ‘ elenco-selezione ‘ e ‘ elenco-destinazione ‘ in questo esempio.
- Il nostro primo elenco di selezione avrà una serie di opzioni di base.
- La seconda selezione non ha valori di opzione, poiché questi saranno compilati da AJAX.
<select name = "list-select" id = "list-select">
<value option = ""> Seleziona .. </option>
<value option = "tea"> tea </option>
<value option = "coffee"> coffee </option>
<option value = "water"> water </option>
</ Select>
<select name = "list-target" id = "list-target"> </select>
Il jQuery
Ora per mettere tutto insieme. Ecco il jQuery che ascolta la modifica dell'elenco di selezione, effettua la chiamata AJAX e completa la selezione della destinazione.
$ (documento) .ready (funzione ($) {
var list_target_id = 'list-target'; // prima selezione della lista di identificazione
var list_select_id = 'list-select'; // selezione della seconda lista di identificazione
var initial_target_html = '<option value = ""> Seleziona un colore ... </option>'; // Messaggio iniziale per la selezione della destinazione
$ ('#' + list_target_id) .html (initial_target_html); // Premi il bersaglio, seleziona l'opzione richiesta
$ ('#' + list_select_id) .change (funzione (e) {
// Prendi il valore scelto nella prima modifica dell'elenco di selezione
var selectvalue = $ (this) .val ();
// Mostra lo stato di 'caricamento' nell'elenco di selezione delle destinazioni
$ ('#' + list_target_id) .html ('<option value = ""> Caricamento in corso ... </option>');
if (selectvalue == "") {
// Mostra la richiesta iniziale nella selezione della destinazione se viene selezionato un valore vuoto
$ ('#' + list_target_id) .html (initial_target_html);
} altro {
// Crea una richiesta AJAX, usando il valore selezionato come GET
$ .ajax ({url: 'ajax-getvalues.php? svalue =' + selectvalue,
successo: funzione (uscita) {
// alert (esci);
$ ('#' + list_target_id) .html (output);
}
errore: funzione (xhr, ajaxOptions, thrownError) {
alert (xhr.status + "" + thrownError);
}});
}
});
});
- Innanzitutto impostiamo alcune variabili per gli ID dell’elenco di selezione.
- Insieme a un’opzione iniziale per la nostra selezione di destinazione che chiede all’utente di effettuare una selezione della selezione iniziale.
- Quindi configuriamo un rilevatore di eventi per rilevare quando viene modificato il nostro primo elenco di selezione e assegnare il valore selezionato a una variabile di “valore di selezione”.
- Se viene scelta la prima opzione “selezionare” (con un valore vuoto), tuttavia, il secondo elenco di selezione tornerà alla richiesta iniziale.
- Se il valore selezionato non è vuoto, eseguiamo la chiamata AJAX.
- Impostiamo anche il valore della selezione della destinazione su “Caricamento in corso …” in modo che l’utente sappia che sta accadendo qualcosa.
- Questo potrebbe lampeggiare solo momentaneamente, quindi potresti volerlo disabilitare.
- La chiamata AJAX richiede il nostro script PHP, usando il valore selezionato come parametro GET.
- Nella corretta esecuzione della sceneggiatura.
- L’HTML della selezione target verrà impostato con i valori delle opzioni che stiamo facendo eco con PHP.
- Include anche una gestione degli errori che può aiutarci a identificare qualsiasi problema , con la connettività.
