Как отправить значение двух зависимых выпадающих списков с помощью почтового запроса AJAX в представление Django?

Question

В настоящее время я пытаюсь отправить значения двух раскрывающихся списков в представление django. Мой код работал бы правильно, если бы выпадающие списки были независимыми. Проблема в том, что это не так. Первый обновляет второй, поэтому мне нужно сделать мой AJAX почтовый запрос после обновления второго выпадающего списка.

Вот мой текущий html / Javascript код:

<select name="d1" class="toChange">
    {% for item in items1 %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
</select>

<select name="d2">
    {% for item in items2 %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
  </select>


<script type="text/javascript">
  function dropdownChange () {
    var value_d1 = $(".toChange option:selected").val();
    var value_d2 = $("select[name=d2] option:selected").val();
    $.ajax({
            url: '/myApp/templates/',
            type: 'POST',
            data: {'d1': value_d1, 'd2': value_d2},
            success: function(data) {
              var str = '';
              data.forEach(function(opt){
              str += '<option value="' + opt + '">' + opt + '</option>';
              });
              document.getElementById("d2").innerHTML = str;
            }
    });
    $(".toChange").change(dropdownChange);

Итак, здесь изменение в d1 обновляет d2, но вызов AJAX выполняется до того, как d2 обновляется и поэтому отправляет неправильное значение на мой взгляд. Как я могу преодолеть эту проблему?

ОБНОВЛЕНИЕ: добавление кода, предложенного TM.96

 <select id="d1" name="d1" class="toChange">
    {% for item in items1 %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
  </select>

  <select id="d2" name="d2">
    {% for item in items2 %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
  </select>


<script type="text/javascript">

let select1 = document.getElementById('d1');
let select2 = document.getElementById('d2');

function onChangeSelect1() {

    window.select2.value = window.select1.options[window.select1.selectedIndex].value;

    onChangeSelect2();
}

function onChangeSelect2() {
    console.log('Value of Select 1: ' + window.select1.value);
    console.log('Value of Select 2: ' + window.select2.value);

    $.ajax({
            url: '/myApp/templates/',
            type: 'POST',
            data: {'d1': select1, 'd2': select2},
            success: function(data) {
              var str = '';
              data.forEach(function(opt){
              str += '<option value="' + opt + '">' + opt + '</option>';
              });
              document.getElementById("d2").innerHTML = str;
            }
    }); 
}
$(".toChange").change(dropdownChange);

</script>

ОБНОВЛЕНИЕ 2:

def MyView(request):

    if request.method == 'POST' and request.is_ajax:


        result_r = request.POST.get('d1')
        result_d = request.POST.get('d2')
        query_results = data_immo.objects.all()
        regions = data_immo.objects.values_list("nom_reg", flat=True).distinct().order_by('nom_reg')
        departments = data_immo.objects.values_list("insee_dep").filter(Q(nom_reg=result_r)).distinct()
        cities = data_immo.objects.values_list("nom_com").filter(Q(insee_dep=result_d)).distinct()

        print(departments)

        query_results_dict = {
        'query_results': query_results,
        'regions': regions,
        'departments': departments,
        'reg': result_r
        }

        departmentsVar=[]
        for item in departments:
            item = int(item[0])
            departmentsVar.append(item)

        departmentsVar.sort()
        departmentsVar = json.dumps(departmentsVar)

        citiesVar=[]
        for item in cities:
            citiesVar.append(item)

        citiesVar.sort()
        citiesVar = json.dumps(citiesVar)


        return HttpResponse(departmentsVar, content_type='application/json')

Технически, мне нужно вернуться оба отдела Var и города Var, но по некоторым причинам мои попытки потерпели неудачу. Кажется, что я могу вернуть только одну переменную (так что отделаVar). Я попытался добавить два в словарь, но это не сработало.

Answer 1

Хорошо, поэтому я приведу минимальный рабочий пример для вас ниже:

Сторона сервера:

urls.py

urlpatterns = [
    path('Ajax/Test', views.ajax_test),
]

views.py

def ajax_test(request):
    return JsonResponse(request.GET)

Клиентская сторона:

HTML

<label for="selectCity">City:</label>
<select id="selectCity" onchange="onChangeSelectCity()">
    <option disabled selected value> -- select an option --</option>
    <option value="1">Munich</option>
    <option value="2">Los Angeles</option>
</select>

<label for="selectState">State:</label>
<select id="selectState" onchange="onChangeSelectState()">
    <option disabled selected value> -- select an option --</option>
    <option value="1">Bavaria</option>
    <option value="2">California</option>
</select>

<label for="selectCountry">Country:</label>
<select id="selectCountry" onchange="onChangeSelectCountry()">
    <option disabled selected value> -- select an option --</option>
   <option value="1">Germany</option>
   <option value="2">United States</option>
</select>

Javascript

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
    crossorigin="anonymous"></script>

<!-- JavaScript example code -->
<script>
// Set global variables. You can also set these inside the functions and use 
// them as local variables.
// When you declare a variable outside the function, it is added in the 
// window object internally.
let selectCity = document.getElementById('selectCity');
let selectState = document.getElementById('selectState');
let selectCountry = document.getElementById('selectCountry');

// Triggers if Select City changes.
function onChangeSelectCity() {
    // Print values of the select fields in console.
    console.log('On change Select City:');
    console.log('Value of Select City: ' + window.selectCity.value);
    console.log('Value of Select State: ' + window.selectState.value);
    console.log('Value of Select Country: ' + window.selectCountry.value);

    // Call function that is also called if Select State changes.
    onChangeSelectState(window.selectCity.value);
}

// Triggers if Select State changes.
function onChangeSelectState(value = 0) {
    // If function got called from onChangeSelectCity.
    if (value > 0) {
        window.selectState.value = value;
    }

    // Print values of the select fields in console.
    console.log('On change Select State:');
    console.log('Value of Select City: ' + window.selectCity.value);
    console.log('Value of Select State: ' + window.selectState.value);
    console.log('Value of Select Country: ' + window.selectCountry.value);

    // Call function that is also called if Select Country changes.
    onChangeSelectCountry(window.selectState.value);
}

// Triggers if Select Country changes.
function onChangeSelectCountry(value = 0) {
    // If function got called from onChangeSelectState.
    if (value > 0) {
        window.selectCountry.value = value;
    }

    // Print values of the select fields in console.
    console.log('On change Select Country:');
    console.log('Value of Select City: ' + window.selectCity.value);
    console.log('Value of Select State: ' + window.selectState.value);
    console.log('Value of Select Country: ' + window.selectCountry.value);

    // Put your ajax code here...
    let url = 'Ajax/Test';

    $.ajax({
        type: "GET",
        data: {
            'city': window.selectCity.value,
            'state': window.selectState.value,
            'country': window.selectCountry.value
        },
        url: url,
        success: function (data) {
            console.log(data);
        }
    });
}
</script>

Объяснение:

Я поставил три поля выбора (Город, Штат и Страна).

1. Если город изменяется, штат и страна обновляются в соответствии с городом.
2. Если штат изменяется, страна обновляется в соответствии с государством. Город не изменится.
3. Если страна будет изменена, ничего не будет обновлено. Город и штат не изменятся.

Вызов ajax запускается во всех трех случаях и отправляет правильные значения (ни одного, ни заданные) в представление django. Также представление django возвращает значения обратно, и они будут правильно напечатаны в консоли.