Renderizar una jerarquía de "OPCIONES" en una etiqueta "SELECCIONAR"

Question

Mi problema es HTML y CSS relacionados. Tengo una estructura de tipo de jerarquía que quiero mostrar dentro de una lista. La jerarquía contiene países, estados y ciudades (tiene tres niveles de profundidad).

Quiero mostrar la lista dentro de una lista de selección, cada tipo de elemento (país, estado, ciudad) debe ser seleccionable. Los elementos deben aparecer sangrados como:

United States 
- Hawaii 
-- Kauai 
- Washington 
-- Seattle 
-- Chelan 

El problema es con la sangría. Estoy tratando de usar margen izquierdo o relleno izquierdo para sangrar las etiquetas, que aparecen correctas en Firefox pero no en IE7. Este es un ejemplo de la lista de selección generada:

<select name="Something"> 
<option style="padding-left: 0">United States</option> 
<option style="padding-left: 20px">Hawaii</option> 
<option style="padding-left: 40px">Kauai</option> 
<option style="padding-left: 20px">Washington</option> 
<option style="padding-left: 40px">Seattle</option> 
<option style="padding-left: 40px">Chelan</option> 
</select> 

que quiero lograr indentación consistente a través de los navegadores sin usar hacks CSS.

Answer 1

deceze way es mucho mejor y fue mi primera idea. Como alternativa, si eso no funciona es que se puede utilizar espacios de no separación en el valor de la etiqueta:

<select> 
    <option>select me</option> 
    <option>&nbsp;me indented</option> 
    <option>&nbsp;&nbsp;even more indentation</option> 
</select> 

Está lejos de ser bonita, pero que podría funcionar para usted si el optgroup no lo hace.

Answer 2

La representación de SELECT elementos depende en gran medida del navegador, usted tiene muy poca influencia sobre su presentación. Algunos navegadores obviamente te permiten una mayor personalización que otros, IE permite muy poco (boqueo, quién tiene thunk;)). Si necesita elementos muy personalizados SELECT, necesitará emplear JavaScript o volver a crear algo que se comporte como un SELECT pero está hecho de un grupo de DIV y casillas de verificación o algo así.

Una vez dicho esto, creo que lo que estás buscando son OPTGROUPs:

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

Cada navegador mostrará de manera diferente, pero que van a ser exhibidas en una manera distintiva de una manera u otra. Sin embargo, tenga en cuenta que oficialmente en HTML4 no puede anidar OPTGROUP s.

Answer 3

¿No es este método de agrupación la creación de más problemas de los que resuelve? Como usuario, ¿cuál de esos se supone que debo elegir? ¿Hay algún beneficio al elegir algo más específico que el país?

Si el problema es que solo tiene un campo de base de datos para almacenarlos, ¿por qué no tener tres cuadros de selección separados (haciendo 2 o 3 opcionales) y simplemente almacenar el más específico?:

<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 4

Sólo por el bien de los visitantes, siento que debo compartir esta solución Ideé: http://jsfiddle.net/n9qpN/

Decorar las opciones con la clase de nivel

<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> 

Ahora podemos utilizar jQuery para reformatear el contenido del elemento select

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

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

} 
); 

Esto se puede extender a cualquier nivel

Answer 5

Intente usar & # 160;

<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 6

que fue capaz de lograr esto utilizando el espacio Unicode no-break. http://www.fileformat.info/info/unicode/char/00a0/index.htm

copiar y pegar el carácter de esa página en código y listo: (.   no funcionó para mí porque yo estaba usando una biblioteca para cajas de selección de lujo que inyectaría pie de la letra) https://jsfiddle.net/fwillerup/r9ch988h/