CODEWITHSUNDEEP
jqueryflaskbootstrap-4jinja2
Maria Bohorquez
Maria Bohorquez

Reputation: 89

After selecting a dropdown, change another dropdown (the data is dynamic)

I am working on a project with Booststrap + JQuery + Flask + Jinja. Currently I have three static dropdowns which I want to make dynamic (choose option X in dropdown A, values for dropdown B are changed. After choosing option X in dropdown B, values for dropdown C are changed).

I had a dictionary coming from Flask that had the dropdown as keys and the options for each one as values, and this was my code (this is a jinja template):

<form method="get" action="/some_flask_function" >
    <div class="container-fluid">
        <div class="form-group row">
            <div class="col">
                <label for="dropdownA">Dropdown A</label>
                <select class="form-control" id="dropdownA" name="dropdownA">
                {% for value in options['dropdownA'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col">
                <label for="dropdownB">dropdownB</label>
                <select class="form-control" id="dropdownB" name="dropdownB">
                {% for value in options['dropdownB'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col">
                <label for="dropdownC">dropdownC</label>
                <select class="form-control" id="dropdownC" name="dropdownC">
                {% for value in options['dropdownC'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col-xs">
                <input type="submit"  value="Search" class="btn btn-primary">
            </div>
        </div>
    </div>
</form>

This worked perfectly but if you chose a combination that didn't exist when submitting the form, the page remained blank. I want to make this impossible.

Now I changed the structure of the options dictionary to be like this (so I can know the valid combinations):

options = {
    choiceA: {
        versionA: ['one', 'two', 'three'],
        versionB: ['four, five, six']
    },
    choiceB: {
        versionC: ['seven', 'eight'],
        versionD: ['nine']
    }
}

I want to display on the first dropdown: choiceA and choiceB, if choiceB is selected, the second will display versionC and versionD, if versionC is selected the third dropdown will show seven and eight.

Do you have ideas for an approach? All the similar questions I have seen depend on the data being static and appending it via JQuery. Being at least pointed in the right direction for a solution would be a huge help.

Upvotes: 0

Views: 1607

Answers (1)

NavaneethaKrishnan
NavaneethaKrishnan

Reputation: 1318

Simple.

  1. Create a function in flask that should return the expected output (API).
  2. Write an onchange() function and link it with the dropdown. So if you change any value it will trigger that function.
  3. Get the new values based on the changed value from the backend via AJAX call.
  4. Write function to update the returned value to the next dropdown.

Here is a simple example for the JS function.

$('#id').on('change', function(){
    select_value = this.selected   # get the selected value
    $.ajax({
      url: url,
      method: "POST", # or get
      data: {'value': select_value},
      dataType: 'json',
    }).done(function(response) {
       change_dropdown(response) #create this function to change the dropdown
    }).fail(function (error) {
      alert(error);
    });
})

Upvotes: 1

Related Questions