Как добавлять новую опцию в multi-input > datalist

Question

Пытаюсь добавить через javascript <option value=""></option> в <datalist id="speakers"> , теги добавляются но сам <datalist id="speakers"> не работает правильно , ниже пример как он должен работать: (иконка x не отображается)

<multi-input>
  <input list="speakers">
  <datalist id="speakers">
    <option value="test1"></option>
    <option value="test2"></option>
  </datalist>
</multi-input>
<script src="https://onllyons.com/sasterg.js"></script>

Выше multiselect (выбор из нескольких вариантов) работает отлично позволяя мне выбирать несколько вариантов, но если я добавляю через javascript <option value="asdf"></option> то все выводится но не работает. Ниже мой код копирует span элементы потом выводит.

const tttt = document.querySelector("#createadn");

tttt.addEventListener("click", (event) => {
  let elements = document.querySelectorAll("span");
  for (let elem of elements) {
    document.getElementById("speakers").innerHTML +=
      `<option value="` + elem.innerHTML + `">` + elem.innerHTML + `</option>`;
  }
});

.content span{
  display: block;
  line-height: 1.4;
}

<div class="content">
  <span>111</span>
  <span>222</span>
  <span>333</span>
</div>
<button id="createadn">copy</button> 
<multi-input>
  <input list="speakers">
  <datalist id="speakers">
    <option value="test1"></option>
    <option value="test2"></option>
  </datalist>
</multi-input>

<script src="https://onllyons.com/sasterg.js"></script>

Как видие 2 примера из html

<option value="test1"></option>
<option value="test2"></option>

работают но остальные через js нет. Я попробовал через js добавить весь код и все отбразилоь правельно

const tttt = document.querySelector("#createadn");
tttt.onclick = function () {
  document.getElementById("test").innerHTML = 
  '<multi-input>'+
  '<input list="speakers">'+
  '<datalist id="speakers">'+
    '<option value="test1"></option>'+
    '<option value="test2"></option>'+
  '</datalist>'+
'</multi-input>';
}

<button id="createadn">create</button> 
<div id="test"></div>
<script src="https://onllyons.com/sasterg.js"></script>

Если вы можете помочь мне, то пж подскажите как я могу реализовать правильно второй пример.

Проблема: Multi Select не работает с javascript

БЛОГ НА HUSL

Как добавлять новую опцию в multi-input > datalist

Ответы (0 шт):