Добавление строки в задачи innerHTML |выбор2 - PullRequest
Новая
       13

Добавление строки в задачи innerHTML |выбор2

0 голосов
/ 03 марта 2019

Эй, у меня есть 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, больше не работает ни одна из селектов

edit: https://jsfiddle.net/qt0zvho3/443/ edit: чтобы добавить div к контейнеру: щелкните левый div ==> view ==> добавить требование к статистике

1 Ответ

0 голосов
/ 03 марта 2019

Похоже, что https://jsfiddle.net/5dcfmo6h/ работает, как вы хотите.

Прежде всего, не используйте innerHTML, используйте cloneNode метод.

Во-вторых, уничтожьтеselect2 до клонирования узла.Затем снова инициализируйте select2 для всех элементов .myselect.

В-третьих, не используйте одни и те же атрибуты 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
...