html - codepen - Representación de una jerarquía de "OPCIONES" en una etiqueta "SELECCIONAR"

select html css design

Question

Mi problema es HTML y CSS relacionado. 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 hendidura. Estoy tratando de usar el margen izquierdo o el relleno izquierdo para sangrar las etiquetas, que parecen 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>

Quiero lograr una sangría consistente en todos los navegadores sin usar hacks CSS.

Answer 1

¿Este método de agrupación no crea 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 tiene tres cuadros de selección separados (por lo que 2 o 3 son opcionales) y simplemente almacena los más específicos ?:

<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

Antes de comenzar, el espacio sin interrupciones (& nbsp) no funcionó para mí.

He adjuntado lo siguiente:

String.fromCharCode(8194);

Answer 3

Deceze Way es mucho mejor y fue mi primera idea. Como alternativa, si eso no funciona, es que puede usar espacios sin interrupciones 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 bonito, pero podría funcionar si el grupo opt no lo hace.

Answer 4

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 5

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

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 los mostrará de manera diferente, pero se mostrarán de una manera u otra de una manera distinta. Tenga en cuenta que oficialmente en HTML4 no puede anidar OPTGROUP s.

Answer 6

Pude lograr esto usando el carácter unicode NO-BREAK SPACE. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Copie y pegue el carácter de esa página en el código y listo: https://jsfiddle.net/fwillerup/r9ch988h/

(   no me funcionó porque estaba usando una biblioteca para cuadros de selección sofisticados que los inyectarían literalmente).

Answer 7

Solo por el bien de los visitantes, creo que debería compartir esta solución que diseñé: http://jsfiddle.net/n9qpN/

Decora 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 usar 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.