How do I fill a dropdown menu with a list of dictionaries based on a previous select?

I have to let the user select gears from a list I extracted from a database.

<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>

Depending on this select the user can either choose a bevel or a spur gear. Based on that I want to fill the following select with one of the two lists below (first one is called by stri, second by 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>

I pretty much just want to show the name of each gear and pass it as its value back to python. The other items may be used later aswell. I already looked at some examples but I can’t write a javascript function.