1

各カテゴリ レベルから 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>

ここで、選択したものからの子に基づいて 2 番目の選択を構築する必要があります。

道に迷いました

4

1 に答える 1

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);
            }
        });
    });
}​
于 2012-07-27T02:32:09.467 に答える