階層型の順序付けられていないリストを選択リストに変換する

質問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だけでなく、バニラJavaScriptもそうです。

出典

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ありがとう！ –

階層型の順序付けられていないリストを選択リストに変換する

答えて

関連する問題