Question

我正在处理不同表的搜索表单，我有两个名为“ specialte”和“ option”的表都与一个名为“ service”的表相关联，当我从下拉列表中选择“ service”时，我想要的是另一个下拉列表是使用AJAX自动填充专业和选项的，我尝试了我在互联网上发现的内容，但没什么用。这是我的.models：

class Service(models.Model):
    value = models.CharField(max_length = 45, blank = False, null = False)
    departement = models.ForeignKey(Departement, on_delete = models.CASCADE)

    def __str__(self):
        return self.value

class Option(models.Model):
    value = models.CharField(max_length = 45, blank = False, null = False)
    service = models.ForeignKey(Service, on_delete = models.CASCADE)

    def __str__(self):
        return self.value

class Specialite(models.Model):
    value = models.CharField(max_length = 45, blank = False, null = False)
    service = models.ForeignKey(Service, on_delete = models.CASCADE)

    def __str__(self):
        return self.value

这是我的观点：

def personnel(request):
    if not request.user.is_authenticated:
        return redirect('authentification')
    else:
        service_id = request.GET.get('service')
        a = Affectation.objects.all().prefetch_related()
        o = Option.objects.filter(service_id=service_id).order_by('value')
        s = Specialite.objects.filter(service_id=service_id).order_by('value')
        se = Service.objects.all().prefetch_related()
        context = {
            'affectation':a,
            'option':o,
            'specialite':s,
            'service':se
        }
        return render(request,'personnel/personnel.html',context)

这是html代码：

    <div class="form-group">
      <div class="row">
          <div class="col">
            <label for="formGroupExampleInput1">Service:</label>
            <select name="service" id="service" class="form-control">

                <option>...</option>
              </select>
          </div>
          <div class="col">
            <label for="formGroupExampleInput1">Specialite:</label>
            <select name="specialite" id="specialite" class="form-control">
              {% for o in option%}
                <option>{{ o.value }}</option>
                {%endfor %}
              {% for s in specialite%}
                  <option>{{ s.value }}</option>
              {%endfor %}
                        </select>
              </div>
          <div class="col">
            <label for="formGroupExampleInput1">Grade:</label>
            <input name="grade" type="text" class="form-control" id="formGroupExampleInput2" placeholder="grade">
          </div>
      </div>

    </div>

这是我的脚本：

$("#service").change(function () {
   var url = $("#personnel");  
   var serviceID = $(this).val(); 

   $.ajax({
     type: "GET",                
     url: url,                    
     data: {
       'service': serviceID      
     },
     success: function (data) {    view function
       $("#specialite").html(data);  
     }
   });

 });

Answer 1

该网站不是免费的代码生成器。这是一个示例，可以帮助您形成自己的ajax调用。

这是一个非常标准的ajax调用。您将数据发送到视图，根据外键查找生成匹配的专业和选项列表，然后使用ajax响应生成动态创建的选项。

您应该尝试研究ajax调用和动态下拉列表，因为此站点上有很多有关这些信息。我在评论中发布的链接也应有所帮助。

让我知道您是否需要有关功能特定方面的帮助或卡在零件上。我不会从头开始为您编写所有代码。

编辑：

data.forEach(function(index, data_obj) {
    $("#specialite").append(new Option(data_obj, data_obj));
});

我假设您的值和文本将相同，因此您将在两个地方使用相同的变量。这可能不完全是您想要的，您需要检查ID以确保我正确无误，但这应该可以帮助您入门。

在django问题中使用AJAX自动填充下拉列表

1 个答案: