如何在 Django 中创建多选框?

2024-05-06

我正在尝试创建多选框字段来自姜戈选择 2 https://github.com/applegrew/django-select2库如下图所示?我使用了下一个代码,但它返回简单的选择多个小部件。我想我忘了补充一些东西。我的错误在哪里?有人可以告诉我如何正确创建这样的字段吗?

I use:

django-select-2 版本:5.1.0

jQuery 版本:3.1.1

形式.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

template:

{% 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 文档 http://django-select2.readthedocs.io/en/latest/django_select2.html#javascript选择2个文档 https://select2.github.io/options-old.html#multiple,您可能需要执行以下操作:

$('.django-select2').djangoSelect2({multiple: true});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Django 中创建多选框? 的相关文章

随机推荐

  • PHPQuery WebBrowser 插件 - 使用 cookies

    我正在尝试使用 PHPQuery 的 WebBrowser 插件登录网站 我能够成功登录 但我不确定如何重用上一次调用中的 cookie 到下一次调用 client phpQuery browserGet https website com
  • 能够存储微秒的 Date 对象

    我正在寻找一个能够存储到微秒粒度的 Date 对象 有人知道吗 标准Date对象仅存储到毫秒 我知道这是平台限制 我可以通过包装来解决这个问题Date加上自定义类别中的小数数量 然而 我希望避免编写一个带有适当计算等的内容 我需要解析一个b
  • Mysql Workbench 无法选择外键

    首先 我检查了很多问题并用谷歌搜索了很多 但没有一个解决我的问题 我正在使用 Mysql Workbench 6 3 创建表 我仅使用 gui 而不是单个查询来创建它们 之后我尝试创建一些外键int 11 列 但 GUI 不允许我这样做 这
  • 如何最高效地更新MongoDB中的大量文档?

    我想要最有效地更新大量 gt 100 000 文档 我的第一个天真的方法是在 JS 级别上进行 编写脚本 首先获取 ids 然后循环 ids 并通过 id 调用更新 完整 文档或 set 补丁 我遇到了内存问题 还将数据分成了最大块 500
  • Pandas 数据框列总和并收集结果

    给定以下数据框 import pandas as pd p1 name willy age 11 interest Lego p2 name willy age 11 interest games p3 name zoe age 9 int
  • 如何使用 swift 从 core-grapics API 获取窗口列表

    我正在尝试使用 Swift 从核心图形 API 获取 OSX 上的窗口列表 以便稍后捕获它们的图像 经过一番研究 我发现 CGWindowListCopyWindowInfo Objective C API 调用具有以下签名 CFArray
  • codecvt 不是 std 标头吗?

    此代码使用 Visual C 11 进行编译 并在 Windows 7 上按预期运行 但无法使用 Windows 7 上的 MinGW 4 7 0 或 Linux 上的 gcc 4 8 0 进行编译 编译用 std c 11 flag in
  • Android 中识别点击的图像区域?

    有没有办法在 Android 应用程序中确定用户单击了 ImageView 的哪个区域 例如 x y 坐标 谢谢 查看运动事件 http developer android com intl de reference android vie
  • 变基后无法推送到分支

    我们使用 git 并有一个 master 分支和开发人员分支 我需要添加一个新功能 然后将提交重新设置为 master 然后将 master 推送到 CI 服务器 问题是 如果我在变基期间发生冲突 我无法在变基完成后推送到我的远程开发人员分
  • 使用 SearchView 后重置操作栏

    我在用着SearchView小部件以在我的应用程序中启用搜索 首次单击搜索图标后 SearchView小部件会扩展到搜索字段 并且应用程序图标旁边会显示 后退 箭头 如果我单击应用程序图标 操作栏将恢复到初始状态 没有 后退 箭头 并且Se
  • 如何在 R 中使用相对路径从 mac 上的目录读取数据?

    我正在编写需要同时适用于 Mac 和 Windows 用户的代码 所有用户的计算机上都有 google 驱动器目录的本地副本 我有一段代码可以自动将工作目录设置为源文件位置 我们将此目录称为 directory1 在directory1 中
  • 用户输入时的空闲时间

    我遇到的问题是一个搜索函数 它应该调用我的doSearch 用户在我的系统中停止输入至少 100 毫秒后的方法 input q field 我试图通过使用这个逻辑来实现这一点answer https stackoverflow com a
  • 检测“文件下载”弹出窗口何时关闭

    我有一个网页 用 JSF 制作 其中一些链接允许用户获取 PDF 文件 当用户点击这样的链接时 会显示一个等待弹出窗口 它是一个模式面板 因为 PDF 的生成可能很长 并且一旦创建文件 IE 就会显示 文件下载 弹出窗口 建议 打开 保存
  • 从 GetLastError() 函数返回的错误代码中获取文本

    我需要获取从 GetLastError 函数获得的错误代码的文本 我看到了一些示例 但我想要一个获取代码并返回字符串的函数 谢谢大家 我猜你想要这样的东西 DWORD dwLastError GetLastError TCHAR lpBuf
  • RxJava - 链接请求和更新 UI

    我遇到的问题是这样的 我需要向服务器执行几个请求 下一个请求取决于前一个请求的结果 它们看起来像这样 缩写 Observable
  • 如何调试(最好在 IDE 中)MSBuild 脚本?

    我们非常广泛地使用 MSBuild 作为我们持续集成过程的一部分 虽然它非常强大 我们几乎可以在其中完成所有构建 测试和部署 利用一些自定义任务 我们发现使用标签对其进行调试是一种痛苦 并且不能总是为我们提供足够的信息 我发现 http w
  • 调用事件,h(args) 与 EventName?.Invoke()

    我总是这样调用事件 void onSomeEvent string someArg var h this EventName if h null h this new MyEventArgs someArg 今天 VS 2015 告诉我这可
  • 为什么 getSession() 在短时间内间隔的后续请求中不返回相同的会话?

    我正在发送一个 getJSON HTTP GET 请求两次 使用不同的数据 一次又一次 假设我们有 request1 和 request2 我可以在 FF 和 Chrome 的开发者工具中看到我有相同的cookie JSESSIONID F
  • 使用 leaflet.js 在点周围添加设定大小的正方形多边形

    有点奇怪 希望有人能帮忙 在传单中 一旦用户输入了纬度 经度并向地图添加了一个点 我希望能够在该点周围添加一个 10 公里的正方形 我尝试四处寻找计算方法来找到 x 公里外的正方形角点 但没有挖出任何东西 但肯定有更简单的方法 有人有想法吗
  • 如何在 Django 中创建多选框?

    我正在尝试创建多选框字段来自姜戈选择 2 https github com applegrew django select2库如下图所示 我使用了下一个代码 但它返回简单的选择多个小部件 我想我忘了补充一些东西 我的错误在哪里 有人可以告诉