根据DJango/Ajax中第一个选择的下拉菜单创建一个下拉菜单



我想创建一个下拉选择基于在第一个选择下拉使用Ajax/JQuery与Django

我已经做了几次测试,但目前还没有成功:

模型:

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)

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="equip_sequence" style="font-size:medium;">Machine</label>
<select class="form-control" id="equip_sequence" name="equip_sequence">
{% for instance in equipment %}
<option id="{{ instance.equip_id }}" 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 lineID = $(this).val(); 

$.ajax({                    
url: url,                 
data: {
'line_nm': lineID      
},
success: function (data) {  
$("#equip_sequence").html(data); 
}
});
});
</script>

结果,line_nm已被ajax调用到我的load_equipment视图,但没有返回到第二个选择下拉列表:equi_sequence,它看起来是空的

如果你做:

success: function(data){  
alert(data); 
},
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert("Status: " + textStatus); alert("Error: " + errorThrown); 
}   

你在日志文件中得到任何错误信息吗?

最新更新