Converting ul li list to Select dropdown - select

Question

I have the following structure HTML code
<ul id="list_abcxyz">
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c" href="test.html">Label One<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label odd-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_0" href="test2.html">Label Two<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_1" href="test3.html">Label Three<wbr></a>
<span class="label-count">(1)</span>
</li>
How to convert it to a select drop down? I have tried following the guides in community. But those didn't work. I guess because of extra span tag. But I need that span tag as well.
How can we convert it to select option drop down using JS ?
Thank you.

Answer 1

Something like this should get you started. If you were running into trouble with the <span> then you can use the textContent property to get all text without the html tags included, then remove all multiple spaces with a replace() and trim().
var myform = document.getElementById('myform'),
items = document.getElementById('list_abcxyz').getElementsByTagName('li'),
select = document.createElement('select'),
len = items.length,
option;
for(var i = 0; i < len; i++) {
option = document.createElement('option');
var label = items[i].textContent.replace(/\s\s+/g," ").trim(),
link = items[i].getElementsByTagName('a')[0].href;
option.textContent = label;
option.value = link;
select.appendChild(option);
}
myform.appendChild(select);
select.addEventListener('change',function(evt){
var selectedLink = this.options[this.selectedIndex].value;
console.log(selectedLink);
location.href = selectedLink;
});
<ul id="list_abcxyz">
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c" href="test.html">Label One<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label odd-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_0" href="test2.html">Label Two<wbr></a>
<span class="label-count">(1)</span>
</li>
<li class="label even-row">
<a class="label-link lia-link-navigation" rel="tag" id="link_c19bf51ba9103c_1" href="test3.html">Label Three<wbr></a>
<span class="label-count">(1)</span>
</li>
</ul>
<form id="myform">
</form>