如何在Django中创建多个选择框? [英] How create Multiple Select Box in Django?

问题描述

我正试图从 Django Select 2 库如下图所示?我使用了下一个代码，但是它返回简单选择多个窗口小部件.我想我忘了补充.我的错误在哪里?有人可以告诉我如何正确创建此类字段吗?

I am tring to create Multiple Select Box field from Django Select 2 library as in the picture below? I used next code but it return simple select multiple widget. I think I forgot something to add. Where is my mistake? Can someone show me how create such field correctly?

我使用:

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);
});

推荐答案

这是个主意.我认为您需要使用Django-Select2提供的jquery插件自行对其进行初始化.遵循 Django-Select2文档和 Select2文档，您可能需要执行以下操作:

Here's an idea. I think you need to initialize it yourself with the jquery plugin provided by Django-Select2. Following the Django-Select2 docs and the Select2 docs, you might need to do the following:

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

这篇关于如何在Django中创建多个选择框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！