Jquery 需要从类别列表中构建多选选项

我需要在每个类别级别上构建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>

现在，我需要基于所选对象的子对象构建第二个select

我迷路了

马上把它们都做完

一次完成所有任务

---

这就是我得到的，但我需要过滤器：比尔和迈克应该是一个选项，如果男性>足球被选中。太棒了！！我一直在尝试我能想到的一切。非常感谢。我正在尝试对第三个选择进行一个.change以转到所选选项的页面，但在生成第三个选择之前，我的脚本将被调用。有什么想法吗？你可以让renderNextLevel返回一个数字，显示它是否是最后一级，然后在现有的更改处理程序中，检查该数字，如果它是最后一级，请立即重定向到新页面。这就是我得到的结果，但我需要过滤器：如果选择了男性>足球，比尔和迈克应该是一个选项。太棒了！！我一直在尝试我能想到的一切。非常感谢。我正在尝试对第三个选择进行一个.change以转到所选选项的页面，但在生成第三个选择之前，我的脚本将被调用。有什么想法吗？你可以让renderNextLevel返回一个数字，显示它是否是最后一个级别，然后在现有的更改处理程序中，检查该数字，如果它是最后一个级别，则立即重定向到新页面。

$(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);
            }
        });
    });
}​