Hi all,

I have a site with a drop down select box which I am using as a jump
menu. This select box contains a long list of product types (generated
via php) and is structured like this

books
-cat1
-cat2
cards
-cat1
-cat2
--subcat1
toys
-cat1
--subcat1
---subsubcat1

Because I don't want to hack around in PHP too much I am using JQuery
to style the options in this select box to highlight the top level
item and indent the subcategories. The further down the subcategory
the more the indent. My current code achieves this by matching the
'-'character in the option tag text value as follows:

$(document).ready(function() {
                        $("select#edit-jump-goto option").each(function(){
                                matchOne = $(this).text().match("-");
                                matchTwo = $(this).text().match("--");
                                matchThree = $(this).text().match("---");
                                if (matchOne != "-") {
                                                $(this).addClass("jumptop1");
                                }
                                else if (matchTwo == "--") {
                                                $(this).css("margin-left", 
"10px");
                                }
                                else{
                                        $(this).css("margin-left", "5px");
                                }
                                if (matchThree == "---") {
                                        $(this).css("margin-left", "15px");
                                }
                        });
                 });

Although this works I'm sure there must be a cleaner way of doing
this. Any suggestions JQuery gurus?

Thanks,
Mat

Reply via email to