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

Question

这是我尝试过的： HTML： 删除了选择命令。我尝试将属性添加到<options>。然而，所有这些都给出了奇怪的结果。我在下面所做的确实产生了一个常规列表，但是它使该选项不可点击。我可能正面临这个问题，因为我删除了 select 命令，但是，我不知道我还能如何进行更改。

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

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

Answer 1

不完全确定您的意思，但您可以很容易地将 <select> 替换为 <ul>。

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

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

function replaceSelectWithClickableList(select, eventListener) {
  let ul = document.createElement('UL');
  ul.classList.add('selectable-items');
  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-items {
  border: thin solid #AAA;
  list-style: none;
  padding: 0;
  width: 8em;
}

.selectable-items .selectable-item {
  cursor: pointer;
  padding: 0.333em;
}

.selectable-items .selectable-item:nth-child(odd)  { background: #F7F7F7; }
.selectable-items .selectable-item:nth-child(even) { background: #E7E7E7; }
.selectable-items .selectable-item:hover           { background: #FFE; }

.selected-item:after {
  color: #0A0;
  content: '\2713'; /* Unicode check-mark */
  float: right;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 0.5em;
}

.as-console-wrapper {  max-height: 100% !important; max-width: 70%; margin-left: 30%; }

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