가 선택하는 드롭 다운

Question

I가 다음과 같은 구조의 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> 

어떻게 다운 선택 드롭으로 변환하는 방법? 나는 지역 사회의 가이드를 따라 가려고 노력했다. 그러나 그것들은 효과가 없었습니다. 여분의 스팬 태그 때문에 추측합니다. 하지만 그 스팬 태그도 필요합니다.

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>

또한