如何克隆一个加载了Django和Python的Select2控件？

5jvtdoz2 于 2023-07-01 发布在 Go

关注(0)|答案(1)|浏览(134)

我试图在div中克隆一个select。但是当我克隆元素时，Select2元素没有Django代码加载的值。我如何克隆我的div与所有的Select2元素值？当我克隆时，它会克隆，但选择不会显示值。非常感谢。

<script>
counter = 0
function addTopic(){
  $( "#select" ).clone().appendTo( "#trying" );
}
</script>
</head>
<body>
<button onclick="addTopic()">Add Topic</button>

<form action="{% url 'testing_show' %}">
<div id="trying">
    <div id="select">
        <select class="js-example-basic-multiple" multiple="multiple">
        {% for taf_doc in taf_documents %}
            <option value="{{ taf_doc.id }}">{{ taf_doc.taf.nom }}</option>
        {% endfor %}

        </select>

        <select class="js-example-basic-multiple" multiple="multiple">
        {% for ue_doc in ue_documents %}
            <option value="{{ ue_doc.id }}">{{ ue_doc.ue.nom}}</option>
        {% endfor %}

这是header：

<head>
<meta charset="UTF-8">
<title>Title</title>
<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(document).ready(function(){
  $(".js-example-basic-multiple").select2();
});//document ready
</script>

django

来源：https://stackoverflow.com/questions/52254071/how-to-clone-a-select2-control-loaded-with-django-and-python

1条答案

按热度按时间

p5cysglq1#

对于那些谁来到这里，我不得不首先'销毁'现有的select 2
$("#parentDiv").children("select").djangoSelect2("destroy")
克隆div，递增id，并删除select 2-container，它是实际select 2 select元素的子元素（所以当我们重新初始化select 2时，我们不会得到重复的内容）

let form_count = 1

function cloneAndChangeIds(wrapper) {

          // clone the wrapper
          let clone = wrapper.cloneNode(true);
          clone.id ="form_" + form_count;

          // add text to the `for` attribute of every label
          const labels = Array.from(clone.querySelectorAll('label'));
          labels.forEach(label => {
            label.htmlFor += "_" + form_count;
          });

          // add text to the `id` attribute of every select and input
          const items = Array.from(clone.querySelectorAll('select, input'));
          items.forEach(select => {
              select.id += "_" + form_count
              if(select.hasAttribute('data-select2-id')){
                  select.setAttribute('data-select2-id', select.id)
              }
          });

          const s2items = Array.from(clone.querySelectorAll('.select2-container'));
          s2items.forEach(select => {
              select.remove()
          });
          return clone;
        }

const container = document.getElementById('parentDiv');
const original_form = document.getElementById('original_form');

然后将其追加回parentDiv，并在两个select 2元素上重新初始化djangoSelect 2

addForm = () => {
            form_count = form_count + 1
$("#original_form").children("select").djangoSelect2("destroy")
            const clone = cloneAndChangeIds(original_form)
            container.appendChild(clone);
            $("#id_segment_"+ form_count).djangoSelect2();
            $("#parentDiv").children("select").djangoSelect2();
}

为我糟糕的JavaScript代码样式道歉

赞(0）回复(0）举报 2023-07-01

我来回答

如何克隆一个加载了Django和Python的Select2控件？

1条答案

相关问题

热门标签

最新问答