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

Stack Overflow Asked by definetly_not_a_robot on September 17, 2020

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

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

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

    <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.typ}}: {{}}</option>
        {% endfor %}

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.

One Answer

You have to use ajax calls.

You have to set on change event of the <select name="typgetr" id="type"> You send a ajax call to a Url that will contain the id of the selected option, example: localhost/example?id=1.

Then you get the id param on Django as GET request and based on that option the user selected you return the select list (html) and you render in the dom using javascript

Answered by Edson Magombe on September 17, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP