Question

嘿，我的div中有一个看起来像这样的div

<div style="border-radius:2px;
           background-color:#252525;
            display:inline-block;margin-left:1.5%;
            margin-right:1.5%;margin-top:1%;margin-bottom:1%;
            width:94%;max-width:94%;min-width:94%;
            height:100px;max-height:height:100px;
            min-height:height:100px;
            ">
            <span style="display:block;font-size:1.3em;
            margin-bottom: 2px;
            ">Stats conditions</span>
            
            <div style="margin-top:1%;">
            
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Gamemode</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="all">All</option>
            <option value="solo">Solo</option>
            <option value="duos">Duos</option>
            <option value="squads">Squads</option>
            </select>
            </div>
            
            <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Stat type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">kills</option>
            <option value="wins">wins</option>
            <option value="kd">kd</option>
            <option value="scrim-kills">scrim kills</option>
            <option value="scrim-wins">scrim wins</option>
            <option value="scrim-kd">scrim kd</option>
            </select>
            </div>
            
             <div style="margin-left:1.5%;
            margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
            <span style="display:block;font-size:0.8em">Condition type</span>
            <select id="ann" class="myselect" style="display:block;width: 100%;min-width: 100%;max-width:100%">
            <option value="kills">Minimum</option>
            <option value="wins">Maximum</option>
            </select>
            </div>
            
            <div style="
align-tems:center;margin-left:1.5%;margin-right:1.5%;display:inline-block;width: 21%;min-width: 21%;max-width:21%">
<span style="display:block;font-size:0.8em">Enter number</span> 
<input id="everyMinutes" style="font-family:Montserrat;
display:block;width: 100%;min-width: 100%;max-width:100%;
border-radius: 3px;border: none;height: 2.35em;
"
type="number" value="">
            
            </div>
            
            
            
                           
                           
            
            </div>
            
            </div>

现在要添加其中一个，我没有完全添加，但是我在select2渲染后添加了它，因此打开它并按f12键并复制了HTML。现在要添加这些div的另一个，我将其添加到容器HTML中。现在，在添加一个元素之前，我单击了所有选择元素，然后弹出它，显示了我的选项。现在，当我通过innerHTML方法添加一个之后，所有的选择都不再起作用

编辑：https://jsfiddle.net/qt0zvho3/443/ 编辑：将div添加到容器中：点击左侧的div ==>视图==>添加统计信息要求

Answer 1

https://jsfiddle.net/5dcfmo6h/似乎在按您的意愿工作。

首先，不要使用innerHTML，请使用cloneNode方法。

第二，在克隆节点之前销毁select2。然后再次为所有select2元素初始化.myselect。

第三，不要一次又一次在页面上使用相同的id属性-ID应该是唯一的。

JS代码：

["modal1", "modal2"].forEach((modalE) => {
  var modal = document.getElementById(modalE);
  var trigger = document.getElementById(`${modalE}-t`);
  var closeButton = document.getElementById(`${modalE}-cb`);

  trigger.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  closeButton.addEventListener("click", function () {
    modal.classList.toggle("show-modal");
  });
  window.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.toggle("show-modal");
    }
  });
});

$(".myselect").select2({
    placeholder: "Choose a option",
});

function addStatR(){
  $(".myselect").select2('destroy');

  const clone = document.querySelector('.stats-conditions').cloneNode(true);
  document.getElementById('stats-conditions').appendChild(clone);

  $(".myselect").select2({
    placeholder: "Choose a option",
  });
}

const addStats = document.getElementById("addStatR")
addStats.onclick = addStatR

将字符串添加到innerHTML问题| select2

1 个答案: