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

Question

我想使用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 它可能有助于解决？ 谢谢

Answer 1

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

例如：

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

Answer 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 %}