javascript - 使用 AJAX 预填写 Django Select 表单

Question

所以我在这里要做的是，我从日期选择器中选择一个日期(下面 AJAX 部分中的#id_date)，这会返回并查询我们的数据库以获取当天的作业列表，呈现一个新的 django 选择将这些作业作为选择的表单，并将其 HTML 版本发送回我们的 JS。

当前发生的情况是，在这一切完成后，当您单击该列表中的第一个作业时，我们的下拉列表中会填充该作业，但没有显示其他选项/下拉列表本身似乎不起作用。

但是，如果我只是将完全相同的内容打印到控制台 (data.form)，并将生成的 HTML 粘贴到 HTML 文件中，它会呈现一个包含所有值的下拉列表，并且工作得很好。

如果您能提供有关此功能为何无法正常运行的任何见解/指示，我将不胜感激。

forms.py

class OrderForm(forms.Form):
    def __init__(self, job_list, *args, **kwargs):
        super(OrderForm, self).__init__(*args, **kwargs)
        self.fields['order'] = forms.ChoiceField(choices=job_list, widget=forms.Select(
            attrs={}))
    order = forms.CharField(widget=forms.Select(
        attrs={}), label='Order #')

views.py

@login_required
def date(request):
    if request.is_ajax():
        day = request.GET.get('date').replace('-', '')
        jobdf = get_jobs(day)
        choices = tuple(
            (m, m + ' - ' + jobdf[jobdf['Inv_Num'] == m]['Customer'].iloc[0].title()) for m in jobdf['Inv_Num'])
        form = OrderForm(job_list=choices).as_p()
        data = {'form': form}
        return JsonResponse(data=data)

AJAX

$("#id_date").change(function() {
  var date = $(this).val()
  $.ajax({
    type: 'GET',
    async: true,
    url: '/date',
    data: {
      'date': date,
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    dataType: 'json',
    success: function(data) {
      console.log(data.form)
      $('#id_order').html(data.form);
    }
  })
});

返回的 HTML

<p><label for="id_order">Order:</label> <select name="order" id="id_order">
  <option value="ex-job1">ex-job1 - ex-name1*</option>

  <option value="ex-job2">ex-job2 - ex-name2</option>

  <option value="ex-job3">ex-job3 - ex-name3</option>

</select></p>

Answer 1

尝试使用 javascript template literal :

$('#id_order').html(`${data.form}`);