Django表格数据修改用jquery

Question

我正在尝试在 Django 中调整一个已经在工作的应用程序，但我对这个环境很陌生，而且我不是原始开发人员，所以我可能有一些概念上的错误，但我还没有找到解决问题的方法。

我有一个引用客户列表的 django model ：

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

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

我想根据表格中包含的 select 保管箱预加载一些数据。 在更改 select 框时，我想在这个多对多字段中包含一些值。

我正在使用 jquery 向字段添加值，据我发现，我需要在两个地方添加客户端引用：

在 Select 中添加名称和 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();
          }
        });
      });

如果我使用此代码，则正确添加了 select 部分，但未正确添加 ul/li 部分。 如果我只是运行 ul/li 部分，它会添加到字段中，但无法存储它。 我不确定哪种是将值添加到这样的字段的正确方法。 欢迎任何想法或更正。

Answer 1

您无需手动创建li标签，只要选择任何值，它们就会由select2插件自动创建。因此，您只需在选择框中输入 append 新选项，然后使用$("#id_clients").val('somevalue')将值设置为选中，这将在ul标记内进行输入，最后使用trigger('change')刷新您的选择框。

演示代码：

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