如何在 Django 中创建多选框？

Posted 2023-02-24

【中文标题】如何在 Django 中创建多选框？

【英文标题】：How create Multiple Select Box in Django?

【发布时间】：2017-10-10 14:19:02

【问题描述】：

我想从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);
);

【问题讨论】：

您的模板是什么样的？是否包含this 示例中所示表单所需的javascript？

您好！我添加我当前的模板来发布。好像我没有在我的表单中添加 js。你能告诉我我到底需要添加什么吗？这个： form.media.js ?

是的，我应该在模板底部的某处添加form.media.js。还没有真正使用过 django 库，但是 select2 需要运行一些 javascript 才能转换选择元素。

我添加了 form.media.css 和 form.media.js 但它没有帮助。好难过。我的朋友，您还有其他想法吗？）

【参考方案1】：

这是一个想法。我认为您需要使用 Django-Select2 提供的 jquery 插件自己初始化它。在Django-Select2 docs 和Select2 docs 之后，您可能需要执行以下操作：

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

【讨论】：

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

我使用 3 版本的 JQuery。这会影响结果吗？

你用过multiple : true吗？

是的，我做到了。我也用过这个：$('#id_company').djangoSelect2(multiple: true);

在引号中试试 true 吧？ multiple : "true" 。如果还是不行，能否在浏览器中打开调试器，查看是否有错误信息？

【参考方案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>