계층 적 정렬되지 않은 목록을 자바 스크립트를 사용하여 선택 목록으로 변환

How to convert unordered list into nicely styled dropdown using jquery?과 비슷한 질문을하지만 위의 ul 목록을 사용하고 싶습니다. 나는이 HTML을 변환 할 : 이것에계층 적 정렬되지 않은 목록을 자바 스크립트를 사용하여 선택 목록으로 변환

<ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about">About us</a> 
     <ul> 
      <li><a href="/about/staff">Staff</a></li> 
       <ul> 
        <li class="current-page"><a href="/about/staff/john-doe">John Doe</a></li> 
        <li><a href="/about/staff/jane-doe">Jane Doe</a></li> 
       </ul> 
     </ul> 
    </li> 
    <li><a href="/products">Products</a> 
     <ul> 
      <li><a href="/products/games">Games</a> 
       <ul> 
        <li><a href="/products/games/xbox">XBOX</a></li> 
        <li><a href="/products/games/ps3">PlayStation 3</a></li> 
        <li><a href="/products/games/ipad">iPad</a></li> 
        <li><a href="/products/games/iphone">iPhone</a></li> 
       </ul> 
      </li> 
      <li><a href="/products/hardware">Hardware</a> 
       <ul> 
        <li><a href="/products/hardware/controllers">Controllers</a></li> 
        <li><a href="/products/hardware/memory">Memory units</a></li> 
       </ul> 
      </li> 
      <li><a href="/products/upcoming">Upcoming</a></li> 
     </ul> 
    </li> 
    <li><a href="/contact">Contact us</a></li> 
</ul>

: 리튬에

<select> 
    <option value="/">Home</option> 
    <option value="/about">About us</option> 
    <option value="/about/staff">- Staff</option> 
    <option value="/about/staff/john-doe" selected>-- John Doe</option> 
    <option value="/about/staff/jane-doe">-- Jane Doe</option> 
    <option value="/products">Products</option> 
    <option value="/products/games">- Games</option> 
    <option value="/products/games/xbox">-- XBOX</option> 
    <option value="/products/games/ps3">-- PlayStation 3</option> 
    <option value="/products/games/ipad">-- iPad</option> 
    <option value="/products/games/iphone">-- iPhone</option> 
    <option value="/products/hardware">- Hardware</option> 
    <option value="/products/hardware/controllers">-- Controllers</option> 
    <option value="/products/hardware/memory">-- Memory</option> 
    <option value="/products/upcoming">- Upcoming</option> 
    <option value="/contact">Contact us</option> 
</select>

클래스 "현재 페이지"를 selected로 선택의 해당 옵션을 표시해야합니다. 바닐라 자바 스크립트뿐만 아니라 jQuery도 마찬가지입니다.

출처

2011-09-12 Per Sandström

명확히하기 : ul 목록에는 계층 구조에 3 개 이상의 수준이있을 수 있으므로 어떤 제한도 있어서는 안됩니다. –

아직 시도해 보셨나요? 코드 샘플을 게시하십시오. –

약간 다른 선택기로 링크 한 질문의 스크립트로 시작해 보았습니까? 선택기가 루트 ul의 자손 인 모든 li 요소를 선택한 다음 목록에 넣으면 대부분 트릭을 수행해야합니다. – Chris

원하는 작업을 수행하는 jQuery 코드가 있습니다. <select>을 어디에 추가 할 것인지 잘 모르기 때문에 <body>에 직접 추가 할 예정입니다. 또한 $('li') 선택자가 너무 욕심 거리며 (문서에있는 모든 <li> 요소를 선택 함) 문제가 있지만 게시 한 <ul> 요소의 상위 요소에 대한 지식을 고려하면 쉽게 수정할 수 있습니다.

(function($) { $(function() { 
    var $select = $('<select>') 
     .appendTo('body'); 

    $('li').each(function() { 
     var $li = $(this), 
      $a  = $li.find('> a'), 
      $p  = $li.parents('li'), 
      prefix = new Array($p.length + 1).join('-'); 

     var $option = $('<option>') 
      .text(prefix + ' ' + $a.text()) 
      .val($a.attr('href'))      
      .appendTo($select); 

     if ($li.hasClass('current-page')) { 
      $option.attr('selected', 'selected'); 
     } 
    }); 
});})(jQuery);

나는 대신 계층 구조 레벨을 표시하는 방법으로 - 접두어 <optgroup> 사용을 고려한다.

출처

2011-09-12 09:48:32

와우, 이건 훌륭합니다. 또한 URL을 변경하면 여기에서 코드 조각을 추가했습니다. http://stackoverflow.com/a/5150486/819276 감사합니다! –

계층 적 정렬되지 않은 목록을 자바 스크립트를 사용하여 선택 목록으로 변환

답변

관련 문제