[JavaScript][MySQL][PHP]Jak zrobić formularz wyboru kategorii jak na Allegro ? Opcje

[Danielcom]

Witam, jak w temacie. Muszę zrobić coś w stylu tego formularza z allegro, a mianowicie, po kliknięciu w kategorię, ma pokazać się okno z wyborem podkategorii i tak aż do wybrania tej ostatniej podkategorii (prawdopodobnie 6 podkategorii to będzie max).

Domyślam się, ze potrzebna będzie znajomość js, ale jak połączyć js z danymi pobieranymi z MySQL ?

[aart3k]

Zrobiłem kiedyś coś w tym stylu jako plugin do jQuery, może Ci się przyda, będzie dobrze działać jak masz małe drzewo kategorii, musisz je sobie jakoś robić w jsonie, forma:

Kod

{
    "Business Root 1":{
        "Business SubRoot 1":{
            "Business Category 1":35,
            "Business Category 2":34,
        },
        "Business SubRoot 2":{
            "Business Category 3":29,
            "Business Category 4":28,
        },
        "Business Category 5":23,
    },
    "Business Root 2":{
        "Business SubRoot 3":{
            "Business Category 6":18,
            "Business Category 23":17,
        },
        "Business SubRoot 4":{
            "Business Category 34":12,
        },
    },
}

Plugin:

Kod

/*
* jQuery.gtreeCategories v0.1
*
* Copyright (c) 2010 aart3k@gmail.com
* Licensed under the New BSD license.
*
* TODO: options
*/
(function($) {

    $.fn.gtreeCategories = function(tree, parentName) {
        
        // function that removes all child optionsBoxes
        var removeNested = function (name) {
            $("ul[name^='"+ name + "']").remove();
        };
        
        categoryIdPicker = this;
        
        // set unique prefix for optionboxes - will be used with deleting
        if(! parentName) {
            parentName = "__catselect";
            $("<br>").css('clear','left').insertAfter(categoryIdPicker);
        }
      
        // number of _ determines what level of choice optionbox belongs to
        var domName = parentName + "_";
        
        // create box with selectable options
        optionsBox = $("<ul>")
            .addClass("ui-selectable")
            .attr('name', domName);
        
        // always insert box before category picker
        optionsBox.insertBefore(categoryIdPicker);

        // process every node on category tree on this level
        $.each(tree, function(name, value) {
            
            // create choice element, add classes that mimics behavior of ui.selectable, add to optionsbox
            element = $("<li>")
                .addClass("ui-widget-content")
                .addClass("ui-selectee")
                .html(name)
                .attr('id', 'cp-' + name.replace(/\s/g, "-"))
                .appendTo(optionsBox);
            
            // clicked element will be highlighted
            element.click(function () {
                $(this).addClass("ui-selected").siblings().removeClass("ui-selected")
                removeNested(domName + '_');
            });
            
            if(typeof value == 'object') { // value is object - has children categories
                
                element.addClass('ui-selectee-haschildren');
                
                element.click(function() {
                    
                    // make new gtreeCategories of lower level (pass child branch)
                    $(categoryIdPicker).gtreeCategories(value, domName);
                    
                });
                
            } else {

                // save picked category ID to the input
                element.click(function() {
                    $(categoryIdPicker).val(value);
                });
                
            }
            
        });

    };
    
})(jQuery);

Użycie:

Kod

$('#id_inputa_do_wpisywania_id_kategorii').gtreeCategories(drzewko);

Jak to ostylować: firebug i popatrz jakie klasy nadaje (IMG:style_emoticons/default/tongue.gif)