Mettre à jour la valeur du filtre déroulant en fonction de l'entrée du premier filtre
P粉033429162
P粉033429162 2023-09-08 17:44:19
0
1
487

Je développe une application Flask qui filtre les valeurs d'une table de base de données Mysql et, en fonction de la valeur sélectionnée de la première liste déroulante, elle mettra à jour la valeur de la deuxième liste déroulante. Renvoyez enfin quelques données

Maintenant, le code fonctionne mais il semble y avoir un bug dans le code tel que lorsque je fais une nouvelle sélection dans la première liste déroulante, il remplit la deuxième liste déroulante avec la valeur de la première liste déroulante ainsi que la valeur attendue pour la deuxième liste déroulante. lister les valeurs

Cela ne devrait pas faire cela, je veux qu'il remplisse uniquement la deuxième liste déroulante avec la valeur attendue, sans ajouter la valeur de la première liste déroulante.

Voici le code d'application de mon flacon :

from flask import jsonify, request from flask import Flask, render_template import mysql.connector app = Flask(__name__) # Configure MySQL connection cnx = mysql.connector.connect( host="xxxxxxx", user="xxxxxxxxx", password="xxxxxxxxx", database="xxxxxxxxxx") @app.route('/', methods=['GET', 'POST']) def index(): try: cursor = cnx.cursor() query = "SELECT topic FROM text_table" cursor.execute(query) data = [row[0] for row in cursor.fetchall()] # Get the first column of all rows cursor.nextset() # consume any unread result cursor.close() if request.method == 'POST': selected_topic = request.form.get('selected_topic') # Get the selected topic from the form if selected_topic: cursor = cnx.cursor() query = "SELECT sub_topic FROM text_table WHERE topic = %s" cursor.execute(query, (selected_topic,)) sub_topics = [row[0] for row in cursor.fetchall()] # Get the sub topics for the selected topic cursor.nextset() selected_sub_topic = request.form.get('selected_sub_topic') # Get the selected sub topic from the form if selected_sub_topic: query = "SELECT text FROM text_table WHERE topic = %s AND sub_topic = %s" cursor.execute(query, (selected_topic, selected_sub_topic)) result = cursor.fetchone()[0] # Get the value of the text for the selected sub topic cursor.nextset() cursor.close() return render_template('index.html', topics=data, selected_topic=selected_topic, sub_topics=sub_topics, selected_sub_topic=selected_sub_topic, result=result) cursor.close() return render_template('index.html', topics=data, selected_topic=selected_topic, sub_topics=sub_topics) return render_template('index.html', topics=data) except Exception as e: # Return an error message if there's an exception return jsonify(error=str(e)), 500 if __name__ == '__main__': app.run()

Voici mon code html avec un peu de JavaScript

   Drop Down Filter  
{% if result %}

{{ result }}

{% endif %}

Merci, toute aide sera grandement appréciée

P粉033429162
P粉033429162

répondre à tous (1)
P粉141035089

Ce problème se produit lorsque vous envoyez un modèle de réponse après le filtrage.

Vous avez rendu index.html, mais lorsque vous modifiez l'option de sélection à partir de cette ligne, vous rendez également index.html.

Cela signifie essentiellement que vous collez tout votre code html dans un élément de sélection que vous pouvez inspecter en l'inspectant dans votre navigateur.

À mon avis, ce qu'il faut faire, c'est que vous ne deviez envoyer qu'un dictionnaire Python comme réponse du sujet enfant.

if selected_topic: cursor = cnx.cursor() query = "SELECT sub_topic FROM text_table WHERE topic = %s" cursor.execute(query, (selected_topic,)) sub_topics = [row[0] for row in cursor.fetchall()] # Get the sub topics for the selected topic cursor.nextset() selected_sub_topic = request.form.get('selected_sub_topic') # Get the selected sub topic from the form if selected_sub_topic: query = "SELECT text FROM text_table WHERE topic = %s AND sub_topic = %s" cursor.execute(query, (selected_topic, selected_sub_topic)) result = cursor.fetchone()[0] # Get the value of the text for the selected sub topic cursor.nextset() cursor.close() return render_template('index.html', topics=data, selected_topic=selected_topic, sub_topics=sub_topics, selected_sub_topic=selected_sub_topic, result=result) cursor.close() return sub_topics

Après avoir réussi à obtenir le dictionnaire, la réponse sera formatée et devra donc être analysée en json. Vous pouvez ensuite utiliser des boucles JS pour créer la boucle et l'ajouter à votre sélection de sous-sujet.

if (xhr.status === 200) { selectSubTopic.options.length = 0; var subTopicOptions = JSON.parse(xhr.responseText); for (var i = 0; i < subTopicOptions.length; i++) { var option = document.createElement('option'); option.text = subTopicOptions[i]; option.value = subTopicOptions[i]; selectSubTopic.appendChild(option); } // Check if the currently selected sub topic is valid for the new selected topic var subTopicOptions = selectSubTopic.options; var foundSelectedSubTopic = false; for (var i = 0; i < subTopicOptions.length; i++) { if (subTopicOptions[i].value === selectSubTopic.value) { foundSelectedSubTopic = true; break; } } if (!foundSelectedSubTopic) { selectSubTopic.value = ""; } } else { console.log('Request failed. Returned status of ' + xhr.status); }
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!