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