如何将下拉列表转换为常规列表？

Question

这是我尝试过的：HTML：删除了“选择”命令。我尝试将属性添加到<options>。但是，所有这些都给出了奇怪的结果。我在下面所做的操作会生成一个常规列表，但是，该选项不可单击。我可能会遇到这种情况，因为我删除了select命令，但是，我不知道该如何更改。

<br><div id="qrcode"></div><br/> 
<label onchange="setPicture();" id="myList" class="list-content"> 
</label>

JS：我在JS中具有三个功能，这些功能可自动更新下拉列表，根据选择更改QR图片并运行QR脚本。我认为不需要对此进行任何更改。

Answer 1

仅遍历选项并构建一个列表以用作替换。

replaceSelectWithClickableList(document.querySelector('.target'), (e) => {
  console.log(`You selected: ${e.target.textContent}`);
});

function replaceSelectWithClickableList(select, eventListener) {
  let ul = document.createElement('UL');
  Array.from(select.options).forEach(function(option) {
    let li = document.createElement('LI');
    li.textContent = option.text; // or option.value
    li.classList.add('selectable-item');
    li.addEventListener('click', eventListener);
    ul.appendChild(li);
  });
  replaceWith(select, ul);
}

function replaceWith(source, target) {
  source.parentNode.replaceChild(target, source);
}

.selectable-item {
  cursor: pointer;
}

.selectable-item:hover {
  background: #FFE;
}

<select class="target">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>