转换UL李列表，选择下拉

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标签。

我们如何将它转换为使用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>