Как заполнить раскрывающееся меню списком словарей на основе предыдущего выбора?

Question

Я должен позволить пользователю выбрать шестерни из списка, который я извлек из базы данных.

<fieldset>
   <label>Wählen Sie Ihre Getriebeart aus: </label>
   <select name="typgetr" id="type">
      <option value="k">Kegelradgetriebe</option>
      <option value="s">Stirnradgetriebe</option>
   </select>
</fieldset>

В зависимости от этого выбора пользователь может выбрать коническое или прямозубое колесо. Исходя из этого, я хочу заполнить следующий выбор одним из двух списков ниже (первый вызывается stri, второй - keri).

[{'name': '4950491', 'typ': 'Ritzel', 'nzahn': 17, 'zahnver': 4.412}, {'name': '4559693', 'typ': 'Ritzel', 'nzahn': 18, 'zahnver': 4.39}, {'name': '4960360', 'typ': 'Ritzel', 'nzahn': 18, 'zahnver': 4.5556}, {'name': '4960346', 'typ': 'Ritzel', 'nzahn': 20, 'zahnver': 3.5}, {'name': '4960377', 'typ': 'Ritzel', 'nzahn': 19, 'zahnver': 3.53}, {'name': '4960356', 'typ': 'Ritzel', 'nzahn': 19, 'zahnver': 3.53}, {'name': '4960348', 'typ': 'Ritzel', 'nzahn': 19, 'zahnver': 3.53}, {'name': '4960314', 'typ': 'Ritzel', 'nzahn': 20, 'zahnver': 3.05}]

[{'name': '4950428', 'typ': 'Ritzel', 'nzahn': 11, 'zahnver': 3.3636}, {'name': '4447822', 'typ': 'Ritzel', 'nzahn': 11, 'zahnver': 2.5455}, {'name': '4936736', 'typ': 'Ritzel', 'nzahn': 11, 'zahnver': 2.55}, {'name': '4564106', 'typ': 'Ritzel', 'nzahn': 9, 'zahnver': 4.778}]


<fieldset>
    <label>Geben Sie Ritzelwelle und Zahnrad der <strong>ersten</strong> Getriebestufe ein: </label>
    <select name="zr12" id="zr12">
        {% for i in keri %}
            <option value="{{i.name}}">{{i.typ}}: {{i.name}}</option>
        {% endfor %}
    </select>
</fieldset>

Я просто хочу показать имя каждого gear и передайте его в качестве значения обратно в python. Остальные предметы можно использовать и позже. Я уже просмотрел несколько примеров, но не могу написать функцию javascript.

Answer 1

Вы должны использовать ajax звонки.

Вы должны установить событие изменения <select name="typgetr" id="type"> Вы отправляете вызов ajax на URL-адрес, который будет содержать идентификатор выбранной опции, пример: localhost / example? id = 1 .

Затем вы получаете параметр id в Django как запрос GET, и на основе этой опции, выбранной пользователем, вы возвращаете список выбора (html), и вы рендерите в dom, используя javascript