如何在 select2 django 表单集中更改每个表单的 ID

Question

i need to increment id field forms per form

default id which django provides is id_formsetname_set-0-fieldName and 0 increment one by one

in my case named id_items_set-0-model and for second form will be id_items_set-1-model it display in inspect element source code from browser, i used this for loo script

for (var i = 0; i < 10; i++){
    $("#id_items_set-"+i+"-model").select2();
 }

but only worked for the first form, i dont want to use django-select2

my template looks like this

this is my snippet

 <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"> {{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:id_items_set-0-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(){ for (var i = 0; i < 10; i++){ $("#id_items_set-"+i+"-model").select2(); } }) </script>

only work for my first form then doesnt have any effect on other forms? is there something i did wrongly in the script part please?

Answer 1

I have never worked on django. Could you try this please. and if you could share with us a link for real example in case this doesn't work

 $(()=>{
     let ids = document.querySelectorAll("[id=*'id_items_set']");
     ids.forEach((element)=>{
    $(element).select2();
    });
     });

Answer 2

jquery.formset has added attribute we can call a function every time when a row created

<script type="text/javascript">
$(function(){
    $('.tb1 tr:last').formset({
        prefix:'{{items.prefix}}',
        addText:'add',
        deleteText:'remove',
        addCssClass:'btn btn-success',
        added:function($row){
                  $('.model').select2()
              }
      });
   })
</script>