Преобразование уль список литий выбрать выпадающий

Question

У меня есть следующая структура HTML-код

<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> 

Как преобразовать его в раскрывающемся списке выберите? Я пробовал следовать советам в сообществе. Но это не сработало. Я думаю, из-за дополнительного тега span. Но мне нужен этот тег span.

Как мы можем преобразовать его, чтобы выбрать вариант с помощью JS?

спасибо.

Answer 1

Что-то вроде этого должно вас начать. Если у вас возникли проблемы с <span>, вы можете использовать свойство textContent, чтобы получить весь текст без встроенных тегов html, а затем удалить все несколько пробелов с помощью replace() и 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>