Блог

У меня есть набор данных под названием countries из файла JSON с именем countries.json.

Эти данные заполняют выпадающий список идентификатором #country.

Когда пользователь выбирает этот выпадающий список и выбирает страну, появляется выбор для «#state».

Запрет всей консоли.войдите в систему здесь, это работает, чтобы получить правильные данные в консоль, но не в правильный тег select:

 const selectTag = document.getElementById("state");
document.getElementById("country").addEventListener("change", function() {
    const country_change = document.getElementById("country").value;
    console.log(country_change);
    console.log(countries);
    console.log(selectTag);
    const statesArray = [];
    const Ind = countries.findIndex(e => {
      return e['name'] === country_change;
})

if(Ind != -1){
      countries[Ind]['states'].forEach(e=> statesArray.push(e['name']));
}

statesArray.forEach(e => {
console.log(e);  
const option = document.createElement('option');
option.setAttribute("value", "state.name");
  option.innerText = e;
  selectTag.appendChild(option);   
  })
});
 

Теги выбора следующие:

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

Когда я выбираю страну, я ожидаю, что все штаты заполнят тег #state select .

Однако, хотя консоль.журнал действительно показывает правильные состояния для выбора пользователем, при этом тег select не заполняется идентификатором #state.

На данный момент я не уверен, связано ли это с тем, что я не создаю значение для параметра или не создаю, но когда я пытаюсь добавить значение, я теперь не уверен, каков второй аргумент.

Хорошо … это немного неловко, но стоит публикации. Проблема не в JS и не в шаблонах Jinja. Но тот факт, что я использовал Materalize CSS.

Обновленный JS теперь выглядит следующим образом:

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

const selectTag = document.getElementById("state");
document.getElementById("country").addEventListener("change", function () {
  const country_change = document.getElementById("country").value;
  console.log(country_change);
  console.log(countries);
  console.log(selectTag);
  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 => {
      console.log(e);
      str  = `<option value="${e}">${e}</option>`;
  })
  selectTag.innerHTML = str;
  $("#state").trigger('contentChanged');
});
 

Если вы используете шаблоны Jinja, вам нужно загрузить jQuery и выполнить Materailize в верхней части base.html чтобы это сработало.