2010-10-27 5 views

Répondre

4

Cela n'a rien à voir avec jQuery ou JavaScript. Utilisez la balise HTML <optgroup> pour diviser votre liste en différentes sections. Par exemple:

<select> 
    <optgroup label="Southern Suburb"> 
    <option value="1">suburb1</option> 
    ... 
    </optgroup> 
    <optgroup label="Northern Suburb"> 
    <option value="5">suburb5</option> 
    ... 
    </optgroup> 
</select> 
+0

désolé .. devrait être plus précis et complexe .. je dois avoir jusqu'à 4 niveaux de hiérarchie. – user384080

+0

@ user384080: Malheureusement, cette fonctionnalité n'existe pas en HTML. Le mieux que vous pouvez faire est d'utiliser '' pour tous les niveaux et indenter manuellement le texte en utilisant ' '. – casablanca

+0

mais je dois interdire à l'utilisateur de sélectionner le nœud parent. Seuls les nœuds feuilles peuvent être sélectionnés .. :(btw existe-t-il un contrôle intégré comme celui-ci avec asp.net? – user384080

1

Edit: Cette réponse est non pertinent que vous demandiez un menu de sélection pas une liste de navigation ...

Se mettre d'accord avec casablanca, un menu déroulant aurait un autre faire avec jquery ... (sauf si vous l'animiez)

Fondamentalement, vous pourriez faire une liste avec vos éléments, puis créer une sous-liste dans un élément de liste de votre première liste (si vous pouvez suivre cela ...)

Exemple:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Contact-Type" content="text/html; charset=utf-8" /> 
    <title>Dropdown</title> 

    <style type="text/css"> 
    /* hide child elements */ 
    #nav li ul { 
     display:none; 
    } 

    /* show child elements when hovering over list item */ 
    #nav li:hover ul { 
     display:block; 
    } 
    </style> 
</head> 
<body> 

<ul id="nav"> 
    <li><a href="#">Southern Suburb</a> 
    <ul> 
     <li><a href="#">suburb1</a></li> 
     <li><a href="#">suburb2</a></li> 
     <li><a href="#">suburb3</a></li> 
    </ul> 
    </li> 
</ul> 

</body> 
</html> 

Bonne chance