根据 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

JqG​​rid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值

SWR 根据下拉列表中的选定值获取数据

如何根据下拉列表中的选定数字生成表单输入字段(选择)

使用angular js根据下拉列表中的选定输入隐藏表单中的字段

text 根据下拉列表中的选定选项重定向到网址