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

Question

У меня возникли некоторые трудности с настройкой моего выпадающего меню для корректной работы с флягой через javascript. У меня есть запрос, сделанный вручную через Flaskforms, который заполняет SelectField для марки, модели, детали и цвета, когда администратор создает и добавляет новые модели телефонов и детали в базу данных. Моя цель состояла в том, чтобы при выборе Model он изменил результаты 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 %}
<div class= "content-section">
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <fieldset class="form-group">
      <div class="page-header">
        <legend class="border-bottom mb-4">
          <h1>{{ legend }}</h1>
        </legend>
      </div>

      <div class="form-group">
        {{ form.phone_make.label(class="form-control-label") }}
        {% if form.phone_make.errors %}
          {{ form.phone_make(class="form-control form-control-lg is-invalid") }}
          <div class="invalid-feedback">
            {% for error in form.phone_make.errors %}
              <span>{{ error }}</span>
            {% endfor %}
          </div>
        {% else %}
          {{ form.phone_make(class="form-control form-control-lg") }}
        {% endif %}
      </div>

      <div class="form-group">
        {{ form.phone_model.label(class="form-control-label") }}
        {% if form.phone_model.errors %}
          {{ form.phone_model(class="form-control form-control-lg is-invalid") }}
          <div class="invalid-feedback">
            {% for error in form.phone_model.errors %}
              <span>{{ error }}</span>
            {% endfor %}
          </div>
        {% else %}
          {{ form.phone_model(class="form-control form-control-lg") }}
        {% endif %}
      </div>

      <div class="form-group">
        {{ form.phone_issue.label(class="form-control-label") }}
        {% if form.phone_issue.errors %}
          {{ form.phone_issue(class="form-control form-control-lg is-invalid") }}
          <div class="invalid-feedback">
            {% for error in form.phone_issue.errors %}
              <span>{{ error }}</span>
            {% endfor %}
          </div>
        {% else %}
          {{ form.phone_issue(class="form-control form-control-lg") }}
        {% endif %}
      </div>
</fieldset>

    <div class="form-group">
      {{  form.submit(class="btn btn-outline-info") }}
    </div>
    <script>
      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 += '<option value="' + info.modell + '">' + info.modell + '</option>';
              }
              model_select.innerHTML = optionHTML;
              console.table(data)
          });
        });
      }
    </script>
  </form>
</div>
{% endblock content %}

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

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

Спасибо!