第二个下拉框不会根据第一个下拉框django中选择的值进行更新

<select id="first-dropdown">
  {% for option in first_dropdown_options %}
    <option value="{{ option.value }}">{{ option.label }}</option>
  {% endfor %}
</select>

<select id="second-dropdown">
</select>

<script>
  document.getElementById('first-dropdown').addEventListener('change', function() {
    var selectedValue = this.value;
    updateSecondDropdown(selectedValue);
  });

  function updateSecondDropdown(selectedValue) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/update_second_dropdown/?selected_value=' + selectedValue, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        var secondDropdownOptions = JSON.parse(xhr.responseText);
        var secondDropdown = document.getElementById('second-dropdown');
        secondDropdown.innerHTML = '';

        for (var i = 0; i < secondDropdownOptions.length; i++) {
          var option = document.createElement('option');
          option.value = secondDropdownOptions[i].value;
          option.text = secondDropdownOptions[i].label;
          secondDropdown.appendChild(option);
        }
      }
    };
    xhr.send();
  }
</script>

from django.http import JsonResponse

def update_second_dropdown(request):
    selected_value = request.GET.get('selected_value')
    # 根据第一个下拉框的值进行逻辑处理，获取第二个下拉框的选项值
    second_dropdown_options = [
        {'value': 'option1', 'label': 'Option 1'},
        {'value': 'option2', 'label': 'Option 2'},
        {'value': 'option3', 'label': 'Option 3'},
    ]
    return JsonResponse(second_dropdown_options, safe=False)