Mettre à jour la valeur du filtre déroulant en fonction de l'entrée du premier filtre
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
<!DOCTYPE html>
<html>
<head>
<title>Drop Down Filter</title>
<script>
function updateSubTopics() {
var selectTopic = document.getElementById("selected_topic");
var selectSubTopic = document.getElementById("selected_sub_topic");
var selectedTopicValue = selectTopic.value;
// Send a POST request to update the sub topic options
var xhr = new XMLHttpRequest();
xhr.open('POST', '/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
// Update the sub topic options
selectSubTopic.innerHTML = xhr.responseText;
// 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);
}
};
xhr.send('selected_topic=' + selectedTopicValue);
}
</script>
</head>
<body>
<form method="POST">
<select name="selected_topic" id="selected_topic" onchange="updateSubTopics()">
{% for topic in topics %}
<option value="{{ topic }}"
{% if selected_topic == topic %}selected{% endif %}>
{{ topic }}
</option>
{% endfor %}
</select>
<select name="selected_sub_topic" id="selected_sub_topic">
{% for sub_topic in sub_topics %}
<option value="{{ sub_topic }}"
{% if selected_sub_topic == sub_topic %}selected{% endif %}>
{{ sub_topic }}
</option>
{% endfor %}
</select>
<input type="submit" value="Filter">
</form>
{% if result %}
<h1>{{ result }}</h1>
{% endif %}
</body>
</html>
Merci, toute aide sera grandement appréciée
