javascript — Python Flask — динамический выпадающий список SelectField, не получающий правильную опцию из SQL-алхимии

Python Flask — динамический выпадающий список SelectField, не получающий правильную опцию из SQL-алхимии

У меня возникли некоторые трудности с тем, чтобы заставить мой выпадать работать должным образом на фляге через JavaScript. У меня есть запрос, сделанный вручную через Flaskforms, который заполняет SelectField для марки, модели, детали и цвета, когда администратор создает и добавляет новые модели телефонов и детали в базу данных. Моя цель состояла в том, чтобы, когда Модель была выбрана, она изменила результаты Make SelectField, который затем изменил Part SelectField, и, наконец, имел разные Цвета в зависимости от предыдущих Выборов. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что SelectField не фильтрует результаты, когда я выбираю, какую модель я хочу использовать. Я смотрел видео, которое реализует JavaScript в приложении Flask, которое должно работать, чтобы дать мне возможность динамического выбора, но, к сожалению, не оказывает никакой помощи.

Чтобы проверять код снова и снова, я исключил столбец Color из запроса. Вот что у меня так далеко:

 forms.py---------------------- class TicketForm(FlaskForm): phone_make = SelectField('Phone Make: ', choices=[], validators=[DataRequired()]) phone_model = SelectField('Phone Model: ', choices=[], validators=[DataRequired()]) phone_issue = SelectField('Phone Part: ', choices=[], validators=[DataRequired()]) submit = SubmitField('Submit') model.py---------------------- class Ticket(db.Model): phone_make = db.Column(db.String(32), nullable=False) phone_model = db.Column(db.String(32), nullable=False) phone_issue = db.Column(db.String(32), nullable=False) user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False) def __repr__(self): return f"Ticket('{self. phone_make}', '{self.phone_model}', '{self.phone_issue}')" class Inventory(db.Model): id = db.Column(db.Integer, primary_key=True) make = db.Column(db.String(32), nullable=False) modell = db.Column(db.String(32), nullable=False) color = db.Column(db.String(32), nullable=True, default='n/a') part = db.Column(db.String(32), nullable=False) price = db.Column(db.String(32), nullable=True, default='Amount not Assigned') user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True) def __repr__(self): return f"Inventory('{self.id}', '{self.make}', '{self.modell}', '{self.part}')" routes.py---------------------- @app.route("/ticket/new", methods=['GET', 'POST']) @login_required def new_ticket(): form = TicketForm() inv = Inventory.query.order_by(Inventory.make).all() form.phone_make.choices = set([(inv.make, inv.make) for inv in inv ]) phone_make = form.phone_make.choices form.phone_model.choices = [(inv.modell, inv.modell) for inv in inv] phone_model = form.phone_model.choices form.phone_issue.choices = set([(inv.part, inv.part) for inv in inv ]) phone_issue = form.phone_issue.choices if form.validate_on_submit(): ticket = Ticket( phone_make=form.phone_make.data, phone_model=form.phone_model.data, phone_issue=form.phone_issue.data, db.session.add(ticket) db.session.commit() flash('Your ticket has been created!', 'success') return redirect(url_for('home')) return render_template('create_ticket.html', title = 'New Ticket', form=form, legend='New Ticket') create_ticket.html---------------------- {% extends "layout.html" %} {% block content %} {amp}lt;div class= "content-section"{amp}gt; {amp}lt;form method="POST" action=""{amp}gt; {{ form.hidden_tag() }} {amp}lt;fieldset class="form-group"{amp}gt; {amp}lt;div class="page-header"{amp}gt; {amp}lt;legend class="border-bottom mb-4"{amp}gt; {amp}lt;h1{amp}gt;{{ legend }}{amp}lt;/h1{amp}gt; {amp}lt;/legend{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {{ form.phone_make.label(class="form-control-label") }} {% if form.phone_make.errors %} {{ form.phone_make(class="form-control form-control-lg is-invalid") }} {amp}lt;div class="invalid-feedback"{amp}gt; {% for error in form.phone_make.errors %} {amp}lt;span{amp}gt;{{ error }}{amp}lt;/span{amp}gt; {% endfor %} {amp}lt;/div{amp}gt; {% else %} {{ form.phone_make(class="form-control form-control-lg") }} {% endif %} {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {{ form.phone_model.label(class="form-control-label") }} {% if form.phone_model.errors %} {{ form.phone_model(class="form-control form-control-lg is-invalid") }} {amp}lt;div class="invalid-feedback"{amp}gt; {% for error in form.phone_model.errors %} {amp}lt;span{amp}gt;{{ error }}{amp}lt;/span{amp}gt; {% endfor %} {amp}lt;/div{amp}gt; {% else %} {{ form.phone_model(class="form-control form-control-lg") }} {% endif %} {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {{ form.phone_issue.label(class="form-control-label") }} {% if form.phone_issue.errors %} {{ form.phone_issue(class="form-control form-control-lg is-invalid") }} {amp}lt;div class="invalid-feedback"{amp}gt; {% for error in form.phone_issue.errors %} {amp}lt;span{amp}gt;{{ error }}{amp}lt;/span{amp}gt; {% endfor %} {amp}lt;/div{amp}gt; {% else %} {{ form.phone_issue(class="form-control form-control-lg") }} {% endif %} {amp}lt;/div{amp}gt; {amp}lt;/fieldset{amp}gt; {amp}lt;div class="form-group"{amp}gt; {{ form.submit(class="btn btn-outline-info") }} {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; let make_select = document.getElementById('phone_make'); let model_select = document.getElementById('phone_model'); make_select.onchange = function() { phone_make = make_select.value; fetch('/model/'   phone_make).then(function(response) { response.json().then(function(data) { let optionHTML =''; for (let info in data.maker){ optionHTML  = '{amp}lt;option value="'   info.modell   '"{amp}gt;'   info.modell   '{amp}lt;/option{amp}gt;'; } model_select.innerHTML = optionHTML; console.table(data) }); }); } {amp}lt;/script{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {% endblock content %} 

Пожалуйста, это не повторный вопрос. Я провел часы на стеке, нашел похожие вопросы, но ничего подобного.

Я хочу, чтобы поле Make принимало решения для всех остальных опций. Поле Make заполняется из инвентаря, который я сам сделал (вообще не кодируется в коде). Когда я выбираю марку, поле «Модель» исчезает. Пожалуйста, порекомендуйте.

Спасибо!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector