我的 select2 jquery 只適用於第一種形式

Question

我想使用select2.min.js自動完成選擇（外鍵值），但它只適用於我的第一個表單，我使用 django 表單集重復 forms

這是我的片段

 <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 只適用於我的第一個表單，然后對其他 forms 沒有任何影響！ 以及如何將add_class的數量設置為 add_class 可能有助於解決？ 謝謝

Answer 1

首先，我希望了解更多信息，例如您如何實際定義表單集。 我也不清楚你想在這里做什么。 請粘貼更多數據。

我建議您考慮使用 django-select2 模塊，該模塊對處理 django 中的 select2 內容有很大幫助。

我也不確定“如何設置表單數量”是什么意思，也許您希望在 for/endfor 循環中包含一些可以用{{ forloop }}完成的增量計數器？

請粘貼更多的東西，答案會更好。

Answer 2

您用於初始化 select2 #model的選擇器用於元素 ID，對於 DOM 中的每個元素，它應該是唯一的。

在大多數瀏覽器中，效果將是僅識別元素 id 的第一個實例，並且 rest 將被忽略，就好像它們不存在一樣。

在這種情況下，您想使用 class 選擇器： .model 。 這將確保為所有具有 class “模型”的元素初始化 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

我發現的方法是通過上下文發送 forms 的號碼，然后在模板中申請循環。

視圖.py

獲取上下文數據（）

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