jinja2 - Showing a pre-selected option in a Jinja for loop that is being populated by a JavaScript

Question

I am using this JS function to populate a select option with "states" from a countries list in a JSON file.

$('#state').on('contentChanged', function () {
  $(this).formSelect();
});

const selectTag = document.getElementById("state");
document.getElementById("country").addEventListener("change", function () {
  const country_change = document.getElementById("country").value;
  const statesArray = [];
  const Ind = countries.findIndex(e => {
      return e['name'] === country_change;
  })
  if (Ind != -1) {
      countries[Ind]['states'].forEach(e => statesArray.push(e['name']));
  }
  let str = "";
  statesArray.forEach(e => {
      str += `<option value="${e}">${e}</option>`;
  })
  selectTag.innerHTML = str;
  $("#state").trigger('contentChanged');
});

document.getElementById("country").addEventListener("load", function () {
  const state_change = document.getElementById("country").value;
  const states_changeArray = [];
  const Ind_state = countries.findIndex(e => {
      return e['name'] === state_change;
  })
  if (Ind_state != -1) {
      countries[Ind_state]['states'].forEach(e => states_changeArray.push(e['name']));
  }
  let str = "";
  states_changeArray.forEach(e => {
      str += `<option value="${e}">${e}</option>`;
  })
  selectTag.innerHTML = str;
  $("#state").trigger('contentChanged');
});

There is an identical code below this but with a $(document).ready(function() so that a user can change the state of a pre-selected country.

I have a for loop that Jinja picks up all the countries and states from a JSON file in a profile page.

<select name="country" id="country">
{% for country in countries %}
{% if profile.country == country.name %}
<option value="{{ country.name }}" selected>{{ country.name }}</option>
{% else %}
<option value="{{ country.name }}">{{ country.name }}</option>
{% endif %}
{% endfor %}
</select>

I use a fairly identical template loop to fill the states dropdown list too:

<select name="state" id="state">
{% for country in countries %}
{% for state in country.states %}
{% if profile.state == state.name %}
<option value="{{ state.name }}" selected>{{ state.name }}</option>
{% else %}
<option value="{{ state.name }}">{{ state.name }}</option>
{% endif %}
{% endfor %} 
{% endfor %}
</select>

My hope was that this line <option value="{{ state.name }}" selected>{{ state.name }}</option> would pick up the previously chosen state and insert it into the option value. But it hasn't. This is because the JS is asking the option to be cleared and repopulate with just the data from that country in the JSON file.

So, how do I add an "if" statement to the JS to read what is selected previously and insert that as the "selected" option?

I tried changing this line to str += `<option value="${e}" selected>${e}</option>`;

But this made no difference to the outcome.

Note: I am using Materialize which is why the script may look a little unusual - I couldn't populate a new attribute from JS without the jQuery script.

Thanks for looking at this. I am happy to give more info if needed.

question from:https://stackoverflow.com/questions/65647285/showing-a-pre-selected-option-in-a-jinja-for-loop-that-is-being-populated-by-a-j

Answer 1

Waitting for answers