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

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

一次全部完成。更新的演示

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