如何在Django中创建多选框？

Question

我正在尝试使用Django Select 2库创建如下图所示的多选框字段。我使用了下面的代码，但它只返回简单的多选小部件。我认为我忘记了添加某些内容。我的错误在哪里？有人能向我展示如何正确地创建这样的字段吗？

我使用： django-select-2版本：5.1.0 JQuery版本：3.1.1

forms.py:

class ProductForm(forms.ModelForm):
    company = forms.ModelMultipleChoiceField(queryset=Company.objects.none())

    class Meta:
        model = Product
        fields = ('company ',)
        widgets = {
            'company': Select2MultipleWidget()
        }

    def __init__(self, all_companies, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs)
        self.fields['company'].queryset = all_companies

模板:

{% block style %}
   {{ form.media.css }}
{% endblock %}

{% load widget_tweaks %}

<form method="post" action="">
    {% csrf_token %}
    <div class="modal-body">
        {% for field in product_form %}
            <div class="form-group{% if field.errors %} has-danger{% endif %}">
                <label class="form-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>

                {% render_field field class="form-control" %}

                {% for error in field.errors %}
                    <div class="form-control-feedback">{{ error }}</div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

{% block script %}
   {{ form.media.js }}
{% endblock %}

JS：

$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#id_company').djangoSelect2({multiple: true});
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_product_form);
            }
        });
    };

    $("#product-add-button").click(loadForm);
});

- Nurzhan Nogerbek

---

你的模板长什么样？你是否包括表单所需的 JavaScript，如 此示例 所示？ - ikkuh

你好！我将我的当前模板添加到帖子中。似乎我没有将js添加到我的表单中。你能告诉我需要添加什么吗？是这个：{{ form.media.js }}？ - Nurzhan Nogerbek

是的，您应该在模板底部的某个地方添加{{form.media.js}}。我没有真正使用过Django库，但Select2需要运行一些Javascript来转换选择元素。 - ikkuh

我添加了 {{ form.media.css }} 和 {{ form.media.js }}，但没有帮助。太难过了。你有其他的想法吗，我的朋友？ - Nurzhan Nogerbek

Answer 1

有一个想法。 我认为您需要使用Django-Select2提供的jquery插件自己进行初始化。 根据Django-Select2文档和Select2文档，您可能需要执行以下操作：

$('.django-select2').djangoSelect2({multiple: true});

- Dibya Chakravorty

---

你好！我也尝试过，但对我没有帮助。我使用了这个：$('#id_company').djangoSelect2();。id_company是选择元素的ID。我将Django生成的选择元素的HTML添加到我的文章中。你有什么想法吗，我的朋友？ - Nurzhan Nogerbek

我使用了3个版本的JQuery。这会影响结果吗？ - Nurzhan Nogerbek

是的，我做了。我也用了这个：$('#id_company').djangoSelect2({multiple: true}); - Nurzhan Nogerbek

尝试将 true 用引号括起来，例如 multiple: "true"。如果这样还不行，您可以在浏览器中打开调试器，检查是否有任何错误信息。 - Dibya Chakravorty

在浏览器控制台中，我遇到了这个错误：Uncaught TypeError: $(...).djangoSelect2 is not a function at 127.0.0.1/:131。你对此有何看法？ - Nurzhan Nogerbek

Answer 2

终于我找到了解决方案。我的问题是我通过 AJAX 加载了表单。因此，{{ product_form.media.js }} 和 {{ product_form.media.css }} 没有起作用。

在我的模板中，我使用以下代码替代 {{ product_form.media.js }} 和 {{ product_form.media.css }}：

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="{% static 'django_select2/django_select2.js' %}"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

- Nurzhan Nogerbek