Le rendu d'une hiérarchie de “OPTION”dans un “SELECT” de la balise

Mon problème est le HTML et CSS liées. J'ai une hiérarchie du type de structure que je veux afficher dans une liste. La hiérarchie se compose des Pays, des États et des Villes (c'est à trois niveaux de profondeur).

Je veux afficher la liste à l'intérieur d'une liste de sélection, chaque type d'élément (Pays, État, Ville) doit être sélectionné. Les éléments devraient apparaître en retrait:

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

Le problème, c'est l'indentation. Je suis en train d'utiliser la marge de gauche ou de padding-left pour le retrait des étiquettes, ce qui semble correct sous FireFox mais pas dans IE7. Ceci est un exemple de la liste de sélection:

<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 la cohérence de l'indentation dans les navigateurs sans utiliser des hacks CSS.

InformationsquelleAutor Salman A | 2009-07-18
  1. 20

    deceze manière est beaucoup mieux et c'était ma première idée. Comme une alternative si cela ne fonctionne pas, c'est que vous pouvez utiliser des espaces insécables dans la valeur du tag:

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

    C'est loin d'être jolie, mais il pourrait travailler pour vous, si le "optgroup" ne fonctionne pas.

    • ugh, je ne peux pas obtenir l'entité fonctionne correctement &nbsp;
    • J'ai peur que c'est la solution la plus fiable, en effet.
    • Je suis d'accord aussi. Les espaces insécables travail, et ainsi de faire des tirets.
    • Ce n'est pas la bonne solution, parce que la recherche par lettre ne fonctionne pas.
    • Si par "recherche par lettre" vous voulez dire à taper pour obtenir le résultat, alors je ne pense pas que cela devrait être un très grand facteur de motivation. Cette fonctionnalité fonctionnalité est très navigateur spécifique sur la façon dont il fonctionne et de l'OMI, n'est pas largement utilisé par les utilisateurs normaux. Si ce n'est pas ce que vous voulez dire, alors je crains que je ne sais pas de quoi vous parlez.
    • semble que Chrome fidèlement rend le &nbsp; mot à mot. J'ai dû utiliser des traits d'union
    • &nbsp;'s tiret de Chrome est petite et est également rendu que la valeur sélectionnée. Si cela n'est pas souhaitable, essayez &emsp;
    • &emsp; ne fonctionne pas dans IE11

    InformationsquelleAutor MacAnthony
  2. 43

    Le rendu de SELECT éléments est en grande partie pour le navigateur, vous avez très peu d'influence sur leur présentation. Certains navigateurs évidemment vous permettre plus d'options de personnalisation que les autres, c'est à dire qui se passe pour permettre à de très peu (gasp, qui l'aurait thunk ;)). Si vous avez besoin de très personnalisée SELECT éléments, vous aurez besoin d'utiliser JavaScript ou re-créer quelque chose qui se comporte comme un SELECT mais elle est faite d'un tas de DIVs et des cases à cocher ou quelque chose qui s'étendent.

    Cela dit, je pense que vous êtes plutôt à la recherche d' "OPTGROUP" s:

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

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

    • Comme alternative, vous pouvez toujours les afficher comme vous l'avez fait dans l'exemple, la mise en retrait d'eux en utilisant des tirets --.
    • Cité à partir de la question: "chaque type d'élément (Pays, État, Ville) doit être sélectionné". Je doute de "optgroup" est sélectionnable.
    • Vrai que. Ensuite, il doit soit les regrouper différemment et utiliser le label du groupe, ainsi, l'étiquette, ou tout simplement ignorer la deuxième partie de ma réponse.
    • Ummm... optgroups ne peuvent pas être imbriquées je pense, je veux dire, je pourrais utiliser optgroups au niveau des pays, mais je ne peux pas les utiliser pour les états.
    InformationsquelleAutor deceze
  3. 10

    Juste pour le plaisir des visiteurs, je me dois de partager cette solution que j'ai imaginé: http://jsfiddle.net/n9qpN/

    Décorer les options avec le niveau de la classe

    <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 la select élément

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

    InformationsquelleAutor codingbiz
  4. 2

    N'est pas cette méthode de groupement créer plus de problèmes qu'elle n'en résout? En tant qu'utilisateur, de celles qui dois-je choisir? Il y a tout avantage à choisir quelque chose de plus spécifique que le pays?

    Si le problème, c'est que vous n'avez qu'un champ de base de données pour les stocker dans, pourquoi ne pas avoir trois sélectionnez les cases (en faisant 2 ou 3 en option) et il suffit de stocker 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>
    • Je vais devoir le faire en cascade "onchange=populate_next_select();" à cette fin. Par ailleurs, ce que je veux, c'est de présenter l'ensemble de la liste dans un galance.
    • A: Pourquoi donc? Vous êtes entièrement remplir à celui-sélectionner la zone de toute façon, alors pourquoi ne pas entièrement remplir tous les 3? Cependant, votre point de vue sur la prestation de l'ensemble de la liste est à la fois un juste un.
    • >> "Pourquoi donc?" Le client dit 🙁
    • Salut, je suis à partir de l'année 2017. Le client est toujours "toujours droite".
    InformationsquelleAutor Simon Scarfe
  5. 2

    Essayez d'utiliser &#160;

    HTML:

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

    InformationsquelleAutor Igor Krupitsky
  6. 1

    Ajoutant le Non espace insécable (&nbsp) ne fonctionne pas pour moi.

    J'ai ajouté le texte suivant:

    String.fromCharCode(8194);

    InformationsquelleAutor Skywalker
  7. 0

    J'ai été en mesure d'accomplir cette tâche en utilisant le NO-BREAK SPACE de caractères unicode. http://www.fileformat.info/info/unicode/char/00a0/index.htm

    Copier-coller le caractère à partir de la page dans le code et le tour est joué:
    https://jsfiddle.net/fwillerup/r9ch988h/

    (&nbsp; ne fonctionne pas pour moi parce que j'ai été en utilisant une bibliothèque de fantaisie sélectionnez les cases qui permettrait d'injecter de mot à mot.)

    InformationsquelleAutor fredw