Как вызвать выпадающий список html select с помощью Ajax JQuery в Django

Я хочу выбрать опцию в первом выпадающем списке select и на основе выбранной опции, ajax должен загрузить второй выпадающий список select, как это сделать?

Вот мой код:

Модели:

class MaintenanceEquipment(models.Model):
    equip_id = models.CharField(max_length=30, auto_created=False, primary_key=True)
    line_nm = models.CharField(max_length=20, blank=True, null = True)
    sequence = models.CharField(max_length=30, blank=True, null = True)
    equip_model = models.CharField(max_length=30, blank=True, null = True)

    def __str__(self):
    return self.equip_id

Просмотров:

from django.shortcuts import render
from maintenance.models import MaintenanceEquipment

def maintenanceIssueView(request):
    equipment_list = MaintenanceEquipment.objects.all()    
    context = {'equipment_list':equipment_list}
    return render(request, 'maintenance/maintenanceIssue.html', context)

def load_equipment(request):
    if request.method == 'GET':
        line = request.GET.get('line_nm')       
        equipment = MaintenanceEquipment.objects.filter(line_nm=line)      
        context = {'equipment': equipment}
        return render(request, 'maintenance/maintenanceIssue.html', context) 

Урлы:

urlpatterns = [
    path('maintenanceIssueView/', views.maintenanceIssueView, name="maintenanceIssueView"),      
    path('ajax/load_equipment/', views.load_equipment, name="ajax_load_equipment"),    
    ]

maintenanceIssue.html:

<form method="POST" id="maintenanceForm" data-equipment-url="{% url 'ajax_load_equipment' %}" novalidate>
{% csrf_token %}      
<div style="text-align:left;" class="container-fluid">    
   <div style="text-align:left;" class="form-row">
    <div class="form-group col-md-6">
        <label for="line_nm" style="font-size:medium;">Line</label>
        <select class="form-control" id="line_nm" name="line_nm" >
            {% for instance in equipment_list %}
            <option id="{{ instance.line_nm }}" value="{{ instance.line_nm }}">{{ instance.line_nm }}</option>
            {% endfor %}
        </select>
    </div>      
   <div class="form-group col-md-6">
        <label for="sequence" style="font-size:medium;">Machine</label>
        <select class="form-control" id="sequence" name="sequence">
            {% for instance in equipment %}
            <option value="{{ instance.sequence }}">{{ instance.sequence }}</option>
            {% endfor %}
        </select>
    </div>
</div>
</div>
</form>

<script>
   $("#line_nm").change(function () {
      var url = $("#maintenanceForm").attr("data-equipment-url"); 
      var line_nm = $(this).val(); 
      
      $.ajax({                    
        url: url,                 
        data: {
          'line_nm': line_nm     
        },
        success: function (data) {  
          $("#sequence").html(data); 
          console.log(data);
        }
      });
    });
</script>

Данные правильно отправляются в представление через GET, вот мой терминал:

[21/Sep/2021 08:34:43] "GET /maintenance/ajax/load_equipment/?line_nm=SMD-16 HTTP/1.1" 200 18644

И я могу видеть данные в console.log должным образом:

<select class="form-control" id="sequence" name="sequence">
            
                <option  name = "sequence" value="470">LOADER1</option>
            
                <option  name = "sequence" value="471">PRINTER1</option>
            
                <option  name = "sequence" value="472">PRINTER2</option>
            
                <option  name = "sequence" value="473">CARRIER JIG UNLOADER </option>
            
                <option  name = "sequence" value="474">P-AOI</option>
            
                <option  name = "sequence" value="475">P-AOI NG BUFFER</option>
            
                <option  name = "sequence" value="476">SHUTTLE1</option>
            
                <option  name = "sequence" value="477">MOUNTER1</option>
            
                <option  name = "sequence" value="478">MOUNTER2</option>
            
                <option  name = "sequence" value="479">MOUNTER3</option>
            
                <option  name = "sequence" value="480">MOUNTER4</option>
</select>

Однако, в моем html select "sequence" отображается пустой, я перепробовал много всего, но пока безуспешно.

<!-- first select populated with context variables -->
<select id='first-select'>
  {% for instance in instances %}
    <option value="{{ instance.id}}">
      {{ instance.text }}
    </option>
  {% endfor %}
</select>

<!-- second select populated with response from ajax -->
<select id='second-select'></select>

$('#first-select').change(function() {

  // send ajax request when the first select is changed:
  $.ajax({
    url : 'the-url',
    type : 'POST',
    data : {
      instanceID : $(this).val()
    },
    success : function(response) {
    
      // this function executes on receiving a successful response from the backend:
      var secondSelect = $('#second-select');
      secondSelect.empty();

      // iterate over the instances in the response and add them to the second select
      for (var instance in response.instances) {
        secondSelect.append($('<option>', {
          value : instance.id,
          text : instance.text
        }));
      }

    }
  }  

});

def render_template(request):

    """ this method renders the template with context variables """

    # set context variables:
    context = {
        "instances" : FirstModel.objects.all()
    }

    return render(request, 'template.html', context=context)


def get_instances(request):

    """ this method returns json-friendly instances for the second select """

    # unpack request:
    instance_id = request.POST.get('instanceID')
   
    # get instance:
    instance = FirstModel.objects.get(id=instance_id)

    # get instances
    other_instances = SecondModel.objects.filter(first_model = instance)

    # serialize data:
    ...

    return JsonResponse({
        "status_code" : 200,
        "instances" : other_instances
    })