Обновление выпадающих элементов выбора в модальном представлении Bootstrap

Я попытался создать динамическую модальную форму, в которой тип пожертвования зависит от организации. Я пытаюсь написать свой Javascript так, чтобы при выборе организации типы пожертвований изменялись в соответствии с этим значением. Еще одна вещь, которую я должен упомянуть - я работаю в Django и имею шаблонные теги, прикрепленные как к html, так и к javascript.

Вот фрагменты моего кода:

Javascript

  window.addEventListener('load', function() {
      document.getElementById("id_organisation").onchange = function () {
          var orgs = document.getElementById("id_organisation");
          var dTypes = document.getElementById("id_donation_type");
          if (orgs[orgs.selectedIndex].value == '-----') {
              dTypes.disabled = true;
              dTypes.options.length = 0;
              dTypes.value = "-----";
              return null;
          } else {
              dTypes.disabled = false;
              var  orgNames = orgs.getElementsByTagName("option");
              var dTypeNames = eval('{{ donation_types|safe }}');
              dTypes.options.length = 0;
              dTypes.options[0] = new Option("-----", "-----");
              for (let i=0; i < dTypeNames.length; i++) {
                  if (dTypeNames[i][0] == $(this).val()) {
                  dTypes.options[dTypes.options.length] = new Option(dTypeNames[i] [1],dTypeNames[i][1]);
              }
          }
          console.log(dTypes);
          return dTypes;
      }
  });

HTML шаблон

  <div class="row mb-3">
      <label for="id_organisation" class="col-md-4 col-form-label text-end"><strong>{{language.forms.organisationLabelName}}</strong></label>
      <div class="col-md-7">
          <select id="id_organisation" name="organisation" class="form-select   {{form_values.errorlist.organisation}}" aria-label="Default select example" value="form.fields.organisation.initial" required>
              <option value="-----" selected>-----</option>
          {% for id, organisation in form.fields.organisation.choices %}
          {% if form.fields.organisation.initial == organisation %}
              <option value="{{ organisation }}" selected>{{ organisation }}</option>
          {% else %}
              <option value="{{ organisation }}">{{ organisation }}</option>
          {% endif %}
          {% endfor %}
          </select>
          <div class="invalid-feedback">{{language.forms.invalidFeedback.organisation}}</div>
      </div>
  </div>
  <div class="row mb-3">
      <label for="id_donation_type" class="col-md-4 col-form-label text-end"><strong>{{language.forms.donationTypeLabelName}}</strong></label>
      <div class="col-md-7">
          <select id="id_donation_type" name="donation_type" class="form-select {{form_values.errorlist.donation_type}}" aria-label="Default select example" required>
              <option value="-----" selected>-----</option>
          {% for id, type in form.fields.donation_type.choices %}
          {% if form.fields.donation_type.initial == donation_type %}
              <option value="{{type}}" selected>{{ type }}</option>
          {% else %}
              <option value="{{type}}">{{type}}</option>
          {% endif %}
          {% endfor %}
          </select>
      <div class="invalid-feedback">{{language.forms.invalidFeedback.donationType}}</div>
      </div>
  </div>

У меня есть функция print в моем слушателе событий, и она показывает, что значение для тега select "id_donation_type" выходит правильным в зависимости от того, что я нажимаю. Я не могу понять, как отправить эту информацию в модальное представление.

У меня точно такой же код для фильтра, который я создал, и он работает просто отлично. Кажется, что для модала это немного сложнее.

Я благодарен за любую помощь, так как я застрял на этом довольно давно.

Вернуться на верх