Ändern von Auswahloptionen basierend auf vorherigen Auswahl mit PHP & AJAX

Ich habe mir ein paar Antworten auf SO angeschaut und ein bisschen gegoogelt … Aber das konnte nicht funktionieren. Ich habe 0 Erfahrung mit Ajax und ich bin neu in PHP.

Was ich brauche, ist, die Optionen der anderen Auswahl basierend auf dem Wert des ersten zu ändern. Und ich muss das tun, ohne die Seite neu zu laden.

Warum nicht jQuery verwenden? Weil ich die Werte von den Auswahlen später erhalten muss, um die Anzeige zu registrieren, und damit am Ende mit zusätzlichen Auswahlfeldern, und das irgendwie vermasselt.

Ich bekomme keinen Fehler und es funktioniert nicht:

Ok, ich habe den Code optimiert und hier ist was ich bisher habe:

In meiner ‘header.php’

 jQuery(function($) { $("#opt-categorias").change(function(){ var opt_categorias = $("#opt-categorias").val(); $.ajax({ type: "GET", url: 'gerenciamento-categorias.php?cat='+opt_categorias, contentType:"application/json; charset=utf-8", dataType: "json", success: function(data){ $("#opt_tipo").empty(); $("#opt_tipo").append(" Tipo de produto"); $.each(data, function(i, item){ $("#opt_tipo").append(''+ data[i].name +''); }); }, complete:function(){ } }); }); });  

In meiner ‘cadastro-anuncios.php’

 $categorias = 'categorias'; $tax_categorias = get_terms($categorias, array('hide_empty' => false)); 
Categoria term_id ) ? 'selected' : ''; echo 'slug.'' . $selected . '>' . $tax_categoria->name. ''; } ?>

In meiner ‘gerenciamento-categorias.php’ (Ich habe mehr Optionen, werde aber nur einen Teil davon lassen, da alle die gleiche Struktur haben)

 $tipos_bicicletas = 'tipos_bicicletas'; $tax_tipos_bicicletas = get_terms($tipos_bicicletas, array('hide_empty' => false)); if ( $_GET['cat'] == 'bicicleta' ) { json_encode($tax_tipos_bicicletas); } 

Solutions Collecting From Web of "Ändern von Auswahloptionen basierend auf vorherigen Auswahl mit PHP & AJAX"

Der erste Schritt, den Sie vornehmen müssen, besteht darin, Ihren Code ein wenig zu reorganisieren. Mit WordPress können Sie Ajax-Aufrufe über eine Aktion wp_ajax registrieren. Dies ist eine sicherere und einfachere Möglichkeit, einen Ajax-Aufruf zu erstellen, den Sie mit Javascript verwenden können.

Unten habe ich alles erstellt, was du brauchst. Die ersten beiden functionen werden in Ihre themes functions.php eingefügt und das letzte Stück muss in eine custom.js-Datei innerhalb Ihres Themes-Stammverzeichnisses eingefügt werden.

Die erste function ruft die Datei custom.js auf und stellt sie zum Laden in Ihr Design in eine Warteschlange. Dies ist die Art und Weise, wie WordPress das Skript in die Ladekette hochlädt, um es je nach Vorliebe in wp_head oder wp_footer zu laden. Wir verwenden auch wp_localize_script, um ein paar Variablen innerhalb von Javascript einzurichten, damit wir ajax verwenden können. Diese sind in clocal gespeichert und sehen folgendermaßen aus: clocal.ajaxurl und clocal.nonce. Die “Nonce” sind Sicherheitsschlüssel, die wir verwenden, um zu überprüfen, dass ein böser Typ nicht versucht, Ihre Website unter anderem über diesen Ajax-Aufruf anzugreifen.

 /* * File: functions.php * This function will enqueue (insert) the script into the WordPress header or footer the proper way, instead of adding it directly to the header.php * We use wp_localize_script to inject a javascript object, clocal, into our custom.js to gain access to the variables ajaxurl and nonce. * * Source: * https://developer.wordpress.org/reference/functions/wp_enqueue_script/ * https://codex.wordpress.org/Function_Reference/wp_localize_script * https://codex.wordpress.org/Function_Reference/wp_create_nonce */ add_action( 'wp_enqueue_scripts', 'cortez_enqueue_script' ); function cortez_enqueue_script() { wp_enqueue_script( 'cortez_custom_js', get_stylesheet_directory_uri() . '/custom.js', array( 'jQuery' ), '1.0', true ); wp_localize_script( 'cortez_custom_js', 'clocal', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'cortez_nonce_security_key' ), ) ); } 

Die nächste function ist Ihr Ajax-Anruf. Wir verwenden zwei Aktionen, wp_ajax und wp_ajax_nopriv , um die Ajax-Aktion “cortez_get_terms” zu aktivieren. Beachten Sie, dass sich die Aktion innerhalb der WordPress-Aktion befindet: wp_ajax_cortez_get_terms . Wenn dies definiert ist, können wir auf der JavaScript-Seite die Aktion “cortez_get_terms” anfordern.

Am Anfang dieser function werden Sie wp_verify_nonce bemerken. Dies überprüft den Sicherheitsschlüssel, den wir in der vorherigen function erstellt haben, um sicherzustellen, dass es sich um eine gültige Anfrage handelt.

 /* * File: functions.php * Add this to your functions.php to enable the ajax call to be called from custom.js. The two actions are required if you want logged in and non-logged in users to be able to use the ajax function. * * Source: * https://codex.wordpress.org/AJAX_in_Plugins * https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action) * https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_nopriv_(action) * https://codex.wordpress.org/Function_Reference/wp_verify_nonce */ add_action( 'wp_ajax_cortez_get_terms', 'cortez_get_terms' ); add_action( 'wp_ajax_nopriv_cortez_get_terms', 'cortez_get_terms' ); function cortez_get_terms() { $data = esc_sql( $_POST ); if ( ! wp_verify_nonce( $data['nonce'], 'cortez_nonce_security_key' ) ) { wp_die( 'Security check' ); } if ( ! isset( $data['term_chosen'] ) || empty( $data['term_chosen'] ) ) { wp_die( 'No Term Chosen' ); } $tipos_bicicletas = 'tipos_bicicletas'; $modelos_bicicletas = 'modelos_bicicletas'; $marcas_bicicletas = 'marcas_bicicletas'; $tax_tipos_bicicletas = get_terms( $tipos_bicicletas, array( 'hide_empty' => false ) ); $tax_modelos_bicicletas = get_terms( $modelos_bicicletas, array( 'hide_empty' => false ) ); $tax_marcas_bicicletas = get_terms( $marcas_bicicletas, array( 'hide_empty' => false ) ); $json = json_encode( $tax_tipos_bicicletas ); if ( $data['term_chosen'] == 'bicicleta' ) { echo $json; } wp_die(); //stop function once you've echoed (returned) what you need. } 

Schließlich binden wir alles über custom.js zusammen. Dies ist eine Datei, die Sie in Ihrem Design erstellen müssen (wp-content / themes / YOUR_THEME / custom.js). Laden Sie den folgenden Code nach dem Erstellen ein. Dies ist der gleiche wie Ihr Ajax-Aufruf, nur dass er die Variablen verwendet, die wir in wp_localize_script als URL eingerichtet haben, und es ist eine POST-Anfrage, keine GET-Anfrage.

Beachten Sie, dass ich auch ein Attribut “Daten” übergebe. Dies ist eine Menge von Daten, die ich in den WordPress Ajax Handler (admin-ajax.php) posten werde. Dazu muss ein “action” -Knoten gehören, der Ihr Ajax-Aufruf ist, in unserem Fall cortez_get_terms. Ohne dies weiß WordPress nicht was zu tun ist.

Sie werden sehen, dass ich in diesem term_chosen . Dies ist der gewählte Wert des Dropdown-Menüs, das der Benutzer auswählt. Wir senden dies an das Ajax-Skript (in der vorherigen function innerhalb von functions.php) und wenn Sie schauen, können wir diese Variable verwenden, um die Benutzerauswahl zu überprüfen und die korrekten Daten auszugeben.

 /* * Filename: custom.js * */ jQuery(function ($) { $("#opt-categorias").change(function () { var opt_categorias = $("#opt-categorias").val(); $.ajax({ type: "POST", url: clocal.ajaxurl, contentType: "application/json; charset=utf-8", dataType: "json", data: { 'action': 'cortez_get_terms', 'nonce': clocal.nonce, 'term_chosen': opt_categorias, }, success: function (data) { $("#opt_tipo").empty(); $("#opt_tipo").append(""); $.each(data, function (i, item) { $("#opt_tipo").append(''); }); }, error: function(error){ }, complete: function () { } }); }); }); 

Dies ist ein schnelles und schmutziges Beispiel und es gibt definitiv mehr zu empfehlen, aber ich denke, das sollte dir den Anfang machen. Achten Sie darauf, die “Quellen” -Links zu betrachten, die ich in die Kommentare der functionen eingefügt habe, und lassen Sie mich wissen, wenn Sie Fragen haben.