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

Isn't this method of grouping creating more problems than it solves? As a user, which of those am I supposed to choose? Is there any benefit to choosing something more specific than country?

If the issue is that you only have one database field to store them in, why not have three separate select boxes (making 2 or 3 optional) and just store the most specific?:

<select name="country">
    <option>Choose a country</option>
    <option>United States</option>
</select>
<select name="state">
    <option>Choose a state</option>
    <option>Hawaii</option>
</select>
<select name="city">
    <option>Choose a city</option>
    <option>Kauai</option>
</select>

Answer 2

Try using  

<select name="Something">
  <option>United States</option>
  <option>&#160;Hawaii</option>
  <option>&#160;&#160;Kauai</option>
  <option>&#160;Washington</option>
  <option>&#160;&#160;Seattle</option>
  <option>&#160;&#160;Chelan</option>
</select>

Answer 3

The rendering of SELECT elements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who'd have thunk ;)). If you need very custom SELECT elements, you'll need to employ JavaScript or re-create something that behaves like a SELECT but is made of a bunch of DIVs and checkboxes or something to that extend.

Having said that, I think what you're looking for are OPTGROUPs:

<select>
  <optgroup label="xxx">
    <option value="xxxx">xxxx</option>
    ....
  </optgroup>
  <optgroup label="yyy">
    ...
  </optgroup>
</select>

Every browser will display them differently, but they'll be displayed in a distinctive fashion in one way or another. Note though that officially in HTML4 you can't nest OPTGROUPs.

Answer 4

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

<select name="hierarchiacal">
<option class="level_1">United States</option>
    <option class="level_2">Hawaii</option>
        <option class="level_3">Kauai</option>
    <option class="level_2">Washington</option>
        <option class="level_3">Seattle</option>
        <option class="level_3">Chelan</option>
</select>

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

Answer 5

I was able to accomplish this using the NO-BREAK SPACE unicode character. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Copy-paste the character from that page into code and voila: https://jsfiddle.net/fwillerup/r9ch988h/

(  didn't work for me because I was using a library for fancy select boxes that would inject them verbatim.)

Answer 6

Prepending Non breaking space (&nbsp) did not work for me.

I prepended the following:

String.fromCharCode(8194);