使用jquery修改Django表单数据

Question

我正在尝试在Django中调整一个已经运行的应用程序，但是我对这个环境非常陌生，并且我不是最初的开发人员，所以我可能会有一些概念上的错误，但是我还没有找到解决问题的方法

我有一个django模型，它引用了客户列表：

clients = models.ManyToManyField(
    Client,
    blank=True,
    verbose_name=_('Clients'),
    related_name='clients',
)

它正在使用自动完成功能输入到管理员中，从另一个表中获取客户机数据。这是完美的工作

我想根据表单中包含的选择下拉框预加载一些数据。在更改选择框时，我想在这个manytomany字段中包含一些值

我正在使用jquery向字段添加值，据我所知，我需要在两个位置添加客户机引用：

在选择框中添加名称和Id

<select name="clients" id="id_clients" class="admin-autocomplete select2-hidden-accessible"
        data-ajax--cache="true" data-ajax--type="GET" data-ajax--url="/en/admin/client/client/autocomplete/"
        data-theme="admin-autocomplete" data-allow-clear="true" data-placeholder=""
        multiple="" tabindex="-1" aria-hidden="true">
    <option value="2355">Client1</option>
</select>

在无序列表（ul）中添加名称作为新li

    <ul class="select2-selection__rendered">
        <span class="select2-selection__clear">×</span>
        <li class="select2-selection__choice" title="Client1">
            <span class="select2-selection__choice__remove" role="presentation">×</span>
            Client1
        </li>
        <li class="select2-search select2-search--inline">
            <input class="select2-search__field" type="search" tabindex="0"
                   autocomplete="off" autocorrect="off" autocapitalize="off"
                   spellcheck="false" role="textbox" aria-autocomplete="list"
                   placeholder=""  style="width: 0.75em;">
        </li>
    </ul>

我有jquery脚本试图添加它，但我没有设法使它工作。代码（简化版）如下所示：

    function addAll() {
        r=$("ul.select2-selection__rendered").empty();
        r=$('#id_clients').empty();
        stDel='<span class="select2-selection__clear">×</span>';
        r=$("span.select2-selection select2-selection--multiple").append(stDel);
        stClientList='<li class="select2-selection__choice" title="Client1"><span class="select2-selection__choice__remove" role="presentation">×</span>Client1</li>';
        r=$("span.select2-selection select2-selection--multiple").append(stClientList);
        stClientId='<option value="2355">Client1</option>';
        r=$('#id_clients').append(stClientId);
      }
    
    $(document).ready(function(){
        $('#id_language').change(function(){
          l=$('#id_language').val();
          if(l=="ES"){
            addAll();
          }
        });
      });

如果我使用此代码，则正确添加选择部分，但不添加ul/li部分。如果我只是运行ul/li部件，它将添加到字段中，但无法存储它。我不确定哪种方法是向这样的字段添加值的正确方法。欢迎提出任何意见或更正

Answer 1

您不需要手动创建li标记，只要选择任何值，select2插件就会自动创建这些标记。因此，您只需在选择框中添加新选项，然后使用$("#id_clients").val('somevalue')将值设置为选中值，这将在ul标记中创建条目，最后使用trigger('change')刷新您的选择框

演示代码

&13； 第13部分,；

$(".select2-hidden-accessible").select2({
  width: '100px'
});

function addAll() {
  $('#id_clients').empty(); //empty select
  stClientId = '<option value="255">Client5</option>';
  $('#id_clients').append(stClientId); //append option
  $("#id_clients").val('255'); //set new value
  $("#id_clients").trigger('change'); //refresh select
}

$(document).ready(function() {
  $('#id_language').change(function() {
    l = $('#id_language').val();
    if (l == "ES") {
      addAll();
    }
  });
});

；

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select name="clients" id="id_language">
  <option value="li">li</option>
  <option value="ES">ES</option>
</select>
<select name="clients" id="id_clients" multiple="" class="admin-autocomplete select2-hidden-accessible">
  <option value="2355">Client1</option>
  <option value="23525">Client2</option>
</select>

；

和#13；