web-dev-qa-db-fra.com

Rendu d'une hiérarchie de "OPTION" dans une balise "SELECT"

Mon problème est lié à HTML et CSS. J'ai une structure de type hiérarchique que je souhaite afficher dans une liste. La hiérarchie contient les pays, les États et les villes (trois niveaux de profondeur).

Je souhaite afficher la liste dans une liste de sélection, chaque type d'élément (pays, État, ville) doit être sélectionnable. Les éléments doivent apparaître en retrait sous la forme:

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

Le problème est avec l'indentation. J'essaie d'utiliser soit la marge gauche, soit la marge gauche pour indenter les balises, qui semblent correctes dans FireFox mais pas dans IE7. Voici un exemple de la liste de sélection générée:

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

Je veux obtenir une indentation cohérente sur tous les navigateurs sans utiliser de hacks CSS.

htmlcsshtml-select
17
Salman A

deceze Way est beaucoup mieux et a été ma première idée. Si cela ne fonctionne pas, vous pouvez également utiliser des espaces insécables dans la valeur de la balise:

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

C'est loin d'être joli, mais cela pourrait fonctionner pour vous si optgroup ne fonctionne pas.

19
MacAnthony

Le rendu des éléments SELECT dépend en grande partie du navigateur. Vous avez très peu d’influence sur leur présentation. Certains navigateurs vous autorisent évidemment plus de personnalisation que d’autres, IE n’autorise que très peu ( gasp , qui aurait du thunk;)). Si vous avez besoin d'éléments SELECT très personnalisés, vous devez utiliser JavaScript ou recréer quelque chose qui se comporte comme un SELECT mais qui est constitué d'un groupe de DIVs et de cases à cocher ou quelque chose de similaire.

Cela dit, je pense que ce que vous recherchez, ce sont OPTGROUPs :

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

Chaque navigateur les affichera différemment, mais ils seront affichés de manière distincte d'une manière ou d'une autre. Notez que officiellement en HTML4, vous ne pouvez pas imbriquer OPTGROUPs.

43
deceze

Juste pour le plaisir des visiteurs, j’ai envie de partager cette solution que j’ai imaginée: http://jsfiddle.net/n9qpN/

Décorer les options avec la classe de niveau

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

Nous pouvons maintenant utiliser jQuery pour reformater le contenu de l'élément select

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

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

 }
);

Cela peut être étendu à n'importe quel niveau

9
codingbiz

Essayez d'utiliser

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

2
Igor Krupitsky

Cette méthode de regroupement ne crée-t-elle pas plus de problèmes qu'elle n'en résout? En tant qu'utilisateur, lequel de ceux que je suis supposé choisir? Y at-il un avantage à choisir quelque chose de plus spécifique que le pays?

Si le problème est que vous n’avez qu’un seul champ de base de données pour les stocker, pourquoi ne pas disposer de trois zones de sélection distinctes (rendant 2 ou 3 facultatives) et ne stocker que le plus spécifique ?:

<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>
2
Simon Scarfe

L'espace de rupture (& nbsp) n'a pas fonctionné pour moi.

J'ai préparé ce qui suit:

String.fromCharCode(8194);

1
Skywalker

J'ai pu accomplir cela en utilisant le caractère unicode NO-BREAK SPACE. http://www.fileformat.info/info/unicode/char/00a0/index.htm

Copiez-collez le caractère de cette page dans le code et le tour est joué: https://jsfiddle.net/fwillerup/r9ch988h/

(&nbsp; n'a pas fonctionné pour moi parce que j'utilisais une bibliothèque pour les sélections de fantaisie qui les injecteraient textuellement.)

0
fredw