How do I convert a drop down list to regular list?

Question

This is what I have tried: HTML: Removed the Select command. I tried adding the attributes to a <options>. However all these give weird results. What I have done below, does produce a regular list however, it makes the option un-clickable. I am probably facing this because I remove the select command, however, I don't know how else I can make a change.

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

JS: I have three functions in JS that automatically update the drop list, change the QR picture based on selection, and run the QR script. I don't think any changes need to be made in this.

Are you looking for something like this ? https://stackoverflow.com/questions/21343216/javascript-loop-through-all-html-select-option — Ananta K Roy, Nov 20 '19 at 14:39

Mr. Polywhirl · Answer 1 · 2019-11-20T16:23:10.140

Not exactly sure what you mean, but you can replace the <select> with a <ul> pretty easily.

Just iterate over the options and build a list to be used as a replacement.

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>

Thank you so much for the response. The reason I am not doing that is because we have a text file where we add a new direction and the webpage list is automatically updated. That is the root of the prroblem — shvan, Nov 20 '19 at 15:22

How do I convert a drop down list to regular list?

1 Answers1