Javascript 如何在select上克隆/输入表单字段？（没有jquery）

为了保持表单简短，在进行选择之前不会添加新的表单字段。可能是用户选择了许多类别

如何初始化复制的选择？它不起作用

为什么在选择选项时会发出两次警报

代码笔：

HTML

<form class="form" method="post">
  <div class="form__group">
    <div class="mdc-select js--article-select" role="listbox" data-mdc-auto-init="MDCSelect">
      <div class="mdc-select__surface" tabindex="0">
        <div class="mdc-select__label">Categorie</div>
        <div class="mdc-select__selected-text"></div>
        <div class="mdc-select__bottom-line"></div>
      </div>
      <div class="mdc-menu mdc-select__menu">
        <ul class="mdc-list mdc-menu__items">
          <li class="mdc-list-item" role="option" tabindex="0">
            Categorie option I
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Categorie option II
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Categorie option III
          </li>
         <li class="mdc-list-item" role="option" tabindex="0">
            Categorie option IV
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>

---

我自己做的。对于所有有类似问题的人，以下是代码：

HTML:

---

为什么利率为负？

// Auto init google web components
window.mdc.autoInit();

function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
  console.log("insertAfter function");
}

// Get all selects
const articleSelect = Array.from(document.querySelectorAll('.js--article-select'));

// Init each select
for (let node of articleSelect) {
  const select = new mdc.select.MDCSelect(node);
  let eleCloned = node.parentNode.cloneNode(true);

  select.listen('MDCSelect:change', () => {
    // Insert cloned element after current select
    insertAfter(eleCloned, node);

    alert(`Selected "${select.selectedOptions[0].textContent}" at index ${select.selectedIndex} ` +
          `with value "${select.value}"`);
  });
}

<div class="form__group">
  <div class="mdc-select js--article-select" role="listbox">
    <div class="mdc-select__surface" tabindex="0">
      <div class="mdc-select__label">Cat</div>
      <div class="mdc-select__selected-text"></div>
      <div class="mdc-select__bottom-line"></div>
    </div>
    <div class="mdc-menu mdc-select__menu">
      <ul class="mdc-list mdc-menu__items">
        <li class="mdc-list-item" role="option" tabindex="0">
          cat 1
        </li>
        <li class="mdc-list-item" role="option" tabindex="0">
          cat 2
        </li>
        <li class="mdc-list-item" role="option" tabindex="0">
          cat 3
        </li>
      </ul>
    </div>
  </div>
</div>

function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

function initSelect(ele) {
  let eleParent = ele.parentNode; // select wrapper
  let eleCloned = eleParent.cloneNode(true);

  const select = new mdc.select.MDCSelect(ele);

  select.listen('MDCSelect:change', () => {
    insertAfter(eleCloned, eleParent);
    initSelect(eleCloned.firstElementChild);
  });

}

initSelect(document.querySelector('.js--article-select'));