Django 表单下拉列表填充值

Django Form dropdown fill with values

我有一个来自我在 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"]

您可以使用 replaceWith 将文本区域替换为 select-box,然后使用 each 循环遍历来自服务器的 return 响应,然后在其中附加选项你的 select-box.

演示代码 :

$(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>