0

私は誰かに助けてもらい、彼はこれを思いつきました。UL からのオプションを使用して 3 つの動的選択フィルターを構築します。

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

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);
            sel.attr('id', 'sel' + height);
            $('#something').append(sel);
            fopt =  $("<option />", {
                "value"   : "",
                "text"    : "Go to...",
            }).appendTo(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);
            }
        });
    });
 }

選択したときに URL に移動するには、最後の選択ボックス オプションが必要です。

$("#something select").change(function() {
    window.location = $(this).find("option:selected").val();
 });

しかし、それは機能していません。助けはありますか？

デモhttp://jsfiddle.net/qjWH7/6/

4

1 に答える 1

0

select 要素を動的に生成しているので、イベントをデリゲートする必要があります。

$(document).on('change', "#something select", function() {
    if (this.selectedIndex == 2) {
        window.location = $(this).val();
    }
});
于 2012-07-28T18:50:39.970 に答える