根据 DJango/Ajax 中的第一个选定下拉菜单创建下拉选择
Posted
技术标签:
【中文标题】根据 DJango/Ajax 中的第一个选定下拉菜单创建下拉选择【英文标题】:Create a dropdown select based on a first selected dropdown in DJango/Ajax 【发布时间】:2021-11-09 20:25:22 【问题描述】:我想使用 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>
结果,ajax 已将 line_nm 调用到我的 load_equipment 视图中,但没有返回到第二个选择下拉列表:equip_sequence,它显示为空
【问题讨论】:
【参考方案1】:如果你做出来,你在控制台的反应是什么:
success: function(data)
alert(data);
,
error: function(XMLHttpRequest, textStatus, errorThrown)
alert("Status: " + textStatus); alert("Error: " + errorThrown);
您的日志文件中是否收到任何错误消息?
【讨论】:
没有错误,它正在返回预期的数据,但尚未出现在选择中 这是控制台中的结果: 您没有带有 id=sequence 的 html 标记,而您有equip_sequence。以上是关于根据 DJango/Ajax 中的第一个选定下拉菜单创建下拉选择的主要内容,如果未能解决你的问题,请参考以下文章
根据下拉列表中的选定值显示表单字段Angular TypeScript
JqGrid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值