Rendering a hierarchy of “OPTION”s in a “SELECT” tag

Question

My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three

Answer 1

Just for the sake of visitors, I feel I should share this solution I devised: http://jsfiddle.net/n9qpN/

Decorate the options with the level class

United States
    Hawaii
        Kauai
    Washington
        Seattle
        Chelan

We can now use jQuery to reformat the content of the select element

$(document).ready(
function(){
   $('.level_2').each(
        function(){
            $(this).text('----'+$(this).text());
        }
   );

   $('.level_3').each(
        function(){
            $(this).text('---------'+$(this).text());
        }
   );

 }
);

This can be extended to any level