如何使用 django-select2 在客户端添加（和选择）新选项？答案

【问题标题】：How can I add (and select) a new option on the client side with django-select2?如何使用 django-select2 在客户端添加（和选择）新选项？
【发布时间】：2017-11-10 16:01:52
【问题描述】：

我有一个使用 django-select2 库的可选字段。我目前正在尝试复制 Django 管理表单中存在的“添加另一个”功能的行为。

我在常规表单模板中添加了一个“+”图标并打开了一个弹出窗口，以便用户可以注册新项目。这部分有效，现在我希望在弹出窗口关闭后自动选择新添加的项目。不过，我似乎无法为可选选项添加新选项。

我阅读了原始的 dismissAddAnotherPopup() 代码和 select2 文档，但是在元素上附加 new Option(...) 并没有达到预期的效果 - 实际上它添加了我想要的尽可能多的选项，但它们出现了在选择框下方而不是在下拉菜单中，好像它们是完全不同的东西。

我查看了 html 结果，似乎 select2 字段没有使用 <option ...> 用于使用 Django 呈现的选项，而是使用一些更深层次的嵌套元素用于选项。

在这种情况下添加新选项的正确语法是什么？

【问题讨论】：

标签： django-forms jquery-select2

【解决方案1】：

为我解决的问题是this answer:

let opt = "<option value=" + myValue + " selected='selected'>" + myValueText + "</option>";
$('#mySelect').html(opt);
$('#mySelect').val(myValue).trigger("change");

仅替换 html 看起来有点难看，但正如我在问题中提到的那样，将 new Option(...) 附加到元素不起作用。

【讨论】：

myValue和myValueText在哪里设置还是有点奇怪。此外，我似乎找不到您所说的 select2 文档。

【解决方案2】：

不完全是客户端，但可能会有所帮助：您可以使用 django-addanother 包装器，例如：

widgets = {
    'somefield': AddAnotherWidgetWrapper(Select2Widget, reverse_lazy('somefield_add')),
}

这将在 Select2 字段旁边呈现一个“+”；当按下一个弹出窗口时，将打开一个允许添加新对象的窗口。保存后，Select2Widget 将自动填充这个新创建的对象。

【讨论】：