使用jquery修改Django表单数据

Question

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

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

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

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

我想预加载一些基于我已经包含在表单中的选择dropbox的数据。在更改选择框时，我想在这个manymany字段中包含一些值。

我正在使用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插件在任何值被选中时自动创建的。因此，您只需要在选择框中添加新选项，然后使用$("#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>