我的 select2 jquery 仅适用于第一种形式

Posted 2023-05-07

【中文标题】我的 select2 jquery 仅适用于第一种形式

【英文标题】：my select2 jquery only work for the first form

【发布时间】：2020-10-04 00:40:48

【问题描述】：

我想使用select2.min.js 自动完成选择（外键值），但它只适用于我的第一个表单，我使用 django formset 重复表单

这是我的sn-p

<tbody class="tbody tb1 " id="form_set">
                    
                    % for item in items.forms %
                    <tr class="p-0 col-12">
                        
                        

                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                <input class="col-12 0qarz qarz" type="number" name="" placeholder="qarz">
                                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                item.price | add_class:'col-12 '
                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">    
                                item.quantity | add_class:'col-12 '
                            </div>
                        </td>
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                item.model | add_class:'col-12 0model model' | attr:'id:model'
                                
                            </div>
                        </td>
                    </tr>
                    % endfor %
                </tbody>
                
<script type="text/javascript">
    $(function()
        $('.tb1 tr:last').formset(
            prefix:'items.prefix',
            addText:'add',
            deleteText:'remove',
            addCssClass:'btn btn-success',
        );
    )
</script>

<script type="text/javascript">
        $(document).ready(function()
            $("#model").select2()
        )
</script>

但 select2 仅适用于我的第一个表单，然后对其他表单没有任何影响！以及如何将表格数量设置为add_class 它可能有助于解决？ 谢谢

【参考方案1】：

首先，我希望了解更多信息，例如您如何实际定义表单集。我也不清楚你想在这里做什么。请粘贴更多数据。

我建议您考虑使用 django-select2 模块，该模块对处理 django 中的 select2 内容有很大帮助。

我也不确定您所说的“如何设置表单数量”是什么意思，也许您希望在 for/endfor 循环中包含一些可以使用 forloop 完成的增量计数器？

请贴更多的东西，答案会更好。

【讨论】：

我在我的子表单中使用了 inlineformset (parent ,child,form ,extra=1) 我有下拉外键选择，对于第一个表单 select2 工作正常，谢谢你的建议，我会试试的。

除了 django-select2，我还建议检查 django-dynamic-formset，它允许动态添加行到您的内联表单集。但是，请注意当前代码存在一些问题，因此请检查此 fork：github.com/Dowsley/django-dynamic-formset/commit/…

【参考方案2】：

您用于初始化 select2 #model 的选择器用于元素 ID，对于 DOM 中的每个元素，它应该是唯一的。

在大多数浏览器中，效果将是仅识别元素 id 的第一个实例，而其余的则被忽略，就好像它们不存在一样。

在这种情况下，您想使用类选择器：.model。这将确保为所有具有“模型”类的元素初始化 select2。所以初始化 select2 的代码是：

<script type="text/javascript">
    $(document).ready(function()
        $(".model").select2()
    )
</script>

【讨论】：

你能分享一下 Loop 部分的 html 被模板引擎解析后的样子吗？这可能有助于找出问题所在。您可以从 Chrome/Firefox 中的 DevTools 或“查看页面源代码”选项中获取，如果您右键单击页面上的任意位置。

没有问题，但它提供名为 (id_sitems_set-0-model) 的默认 id 和第二个子表单 (id_sitems_set-1-model) ，也许我应该设置一个计数器，并且该类仍然保持第一种形式

你可以这样做，但我仍然认为使用一个对你想使用 select2 的每个元素都通用的类会更容易。每个表单中的该字段分配了哪些类？

谢谢我解决了***.com/a/62898342/13001893

这可行，但如果我们有多个不同名称的表单怎么办？

【参考方案3】：

当其他页面出现时，您必须重新初始化（像这样： $("#model").select2();）select2。

【参考方案4】：

您应该需要分别使用不同的 id 进行初始化。

例如：

<script type="text/javascript">
    $(document).ready(function()
        $("#id_1").select2();
        $("#id_2").select2();
    )
</script>

【参考方案5】：

我发现的方法是通过上下文发送表单数量，然后在模板中申请循环。

views.py

get_context_data()

 context.update(
            "accessoryNum": len(StoreRequestAccessory.objects.filter(storeRequestId=self.object.pk)),
            "oneDimensionalItemNum":len(StoreRequestOneDimensionalItem.objects.filter(storeRequestId=self.object.pk)),
            "twoDimensionalItemNum":len(StoreRequestTwoDimensionalItem.objects.filter(storeRequestId=self.object.pk)), 
        )

模板.html

% block javascripts %
<script>
% comment % get accessoryNum from context % endcomment %
    var accessoryNum = accessoryNum;

$(document).ready(function()
        for(let i = 0; i <=accessoryNum; i++)
            $(`#id_storereq_accessory_form-$i-accessoryId`).select2(
                placeholder: "Select a Item",
                allowClear: true
            );
        
);

</script>

% endblock javascripts %