Django Form下拉列表填充值

Question

我有一个来自我在 Django models.py 中创建的字段。其中一个字段是：

res_person_1 = models.TextField(verbose_name="Odgovorna osoba 1")

HTML 页面是：

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">

        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Prijavite nesukladnost</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Prijava</button>
            </div>
        </form>
    </div>

当我检查 HTML 页面时，对象的 ID 是“id_res_person_1”。在页面加载时，我运行脚本从数据库中获取所有用户，这些用户应该填写“res_person_1”字段，并且该字段应该是下拉列表。

脚本是：

<script type="text/javascript">
        var endpoint = '/call_jquery_korisnici/'
        var korisnik_ime_prezime = []
        $.ajax({
            method: "GET",
            url: endpoint,
            success: function(data){
                korisnik_ime_prezime = data.korisnik_ime_prezime
                console.log(korisnik_ime_prezime)
                },
            error: function(error_data){
                console.log("error")
                console.log(error_data)
                }
        })
    </script>

我不知道如何填写该字段以及如何使其下拉。它不适用于：

        $("#id_res_person_1").html(korisnik_ime_prezime);
        document.getElementById('id_res_person_1').value = korisnik_ime_prezime;

如果我控制台输出 var korisnik_ime_prezime: (2) ["TestName1 TestLastname1", "TestName2 TestLastname1"]

Answer 1

您可以使用replaceWith 将您的文本区域替换为选择框，然后使用each 循环遍历来自服务器的返回响应，然后在您的选择框中附加选项。

演示代码：

$(document).ready(function() {
  var korisnik_ime_prezime = []
  /*$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data) {*/
  //just for demo
  korisnik_ime_prezime = ["TestName1 TestLastname1", "TestName2 TestLastname1"] // data.korisnik_ime_prezime
  //replcae textarea with slect
  $("#id_res_person_1").replaceWith("<select name='id_res_person_1' id='id_res_person_1' class='form-control'></select>")
  //loop
  $(korisnik_ime_prezime).each(function(i) {
    $("#id_res_person_1").append("<option>" + korisnik_ime_prezime[i] + "</option>") //append options
  })

  /*},
  error: function(error_data) {
    console.log("error")
    console.log(error_data)
  }
})*/
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">

  <textarea id="id_res_person_1"></textarea>
  <div class="form-group">
    <button class="btn btn-outline-info" type="submit">Prijava</button>
  </div>
</form>