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!

Related Questions

Get data from DataGrid if DataGridCheckBoxColumn is checked

0  Asked on November 4, 2021 by user12711263


The value of local variable isn’t used

1  Asked on November 4, 2021 by greenycodeskii


clickhouse : information_schema.KEY_COLUMN_USAGE

1  Asked on November 4, 2021 by sravya-jasthi


WPF prevent combobox selection change under condition

1  Asked on March 8, 2021 by hasan-h


How to listen to Boot Complete broadcast in Oneplus?

1  Asked on March 8, 2021 by saarang-tiwari


Indirection requires pointer operand error

1  Asked on March 8, 2021 by mr-needhelp


Point Cloud Segmentation

1  Asked on March 7, 2021 by aldi-lin


Angular HTTP get request is not working in ngOnInit

1  Asked on March 6, 2021 by iamgrooot


CheckedChanged not triggering

0  Asked on March 6, 2021


flutter splash screen is blurry on physical device

1  Asked on March 5, 2021 by mohamed-mostapha


Nginx syslog post request

1  Asked on March 5, 2021 by andreas-hunter


Cloning Objects in Google Optimize

0  Asked on March 4, 2021 by jpfotoz


Specialize how std::vector grows

3  Asked on March 3, 2021 by gary-allen


Ask a Question

Get help from others!

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