需要建立從類別列表

Question

我需要建立3個獨立的選擇框濾波器關每個類別級別的多選擇選項：

<div id="something"> 
    <ul>  
     <li><a href="http://">Male</a> 
      <ul>  
       <li><a href="http://">BaseBall</a></li>  
       <li><a href="http://">Football</a> 
        <ul>  
         <li class="LastChild"><a href="http://">Bill</a></li> 
         <li class="LastChild"><a href="http://">Mike</a></li> 
        </ul> 
       </li>  
       <li class=""><a href="http://">Basketball</a></li>  
      </ul> 
     </li> 
    </ul> 
    <ul>  
     <li><a href="http://">Female</a> 
      <ul>  
       <li class="LastChild"><a href="http://">BaseBall</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我已經建立了第一層次：

$("<select />",{"id": "gender"}).appendTo("#something"); 

    $("<option />", { 
    "selected": "selected", 
    "value" : "", 
    "text" : "Gender" 
    }).appendTo(".gender select"); 

    $("#something > ul > li > a").each(function() { 
    var kd = $(this); 
    $("<option />", { 
     "value" : kd.attr("href"), 
     "text" : kd.text() 
    }).appendTo("#something select"); 
    }); 

其中給出我：

<select id="gender"> 
    <option>Male</option> 
    <option>Female</option> 
</select> 

現在我需要建立我的第二選擇根據所選的孩子。

我迷路了

Answer 1

一次做完所有事情。 Updated Demo

$(function() { 
    renderNextLevel('#something'); 
}); 

function renderNextLevel(parent) { 
    $(parent).children('ul').each(function() { 
     var height = $(this).parentsUntil('#something').length; 
     var current = $(parent).children('ul'); 
     var sel = $('.sel' + height); 
     if (sel.length == 0) { 
      sel = $('<select />'); 
      sel.attr('class', 'sel' + height); 
      $('#something').append(sel); 

      var nextLevel = function(text, idx) { 
       var parents = $({}); 
       $('#something select').each(function() { 
        if($(this).index() > idx){ 
         $(this).remove(); 
        } 
       }); 

       $('#something').find('li a').each(function() { 
        if ($(this).text() == text) { 
         parents = parents.add($(this).parent()); 
        } 
       }); 
       renderNextLevel(parents); 
      }; 

      sel.change(function() { 
       nextLevel(sel.find('option:selected').text(), sel.index()); 
      }); 
     } 

     $(this).children('li').each(function() { 
      var opt = $('<option />'); 
      var link = $(this).children('a'); 
      var optVal = link.attr("href"); 
      var optText = link.text(); 
      if (sel.find('option[name="' + optText + '"]').length == 0) { 
       sel.append(opt); 
       opt.attr('value', optVal); 
       opt.attr('name', optText); 
       opt.text(optText); 
      } 
     }); 
    }); 
}​