Zone de liste déroulante avec optgroup en expansion

Je cherche une boîte de sélection que je peux utiliser avec optgroups extensible

Les options des groupes ne doivent pas s’afficher tant que la souris n’est pas placée sur l’étiquette optgroup

  1  2 3 4   1  2 3 4   1  2 3 4

Je veux pouvoir faire cela parce que je vais avoir de très grandes options et cela aidera à les décomposer.

Si je ne parviens pas à le faire via une zone de sélection HTML + JS, j’aimerais créer un menu déroulant personnalisé prenant en charge cette opération à l’aide de balises DIV. Si quelqu’un sait où je peux trouver des informations à ce sujet ou un tutoriel, ce serait formidable.

Merci

NVM j’ai trouvé une solution qui fonctionne,

J’ai dû utiliser HTML, CSS et JS pour réaliser ce que je voulais.

J’ai copié ce tutoriel http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

et ajouté les bits supplémentaires dont j’avais besoin pour générer les groupes et les fonctionnalités.

Le code qui fonctionne pour moi est ci-dessous ….

C’est le HTML pour générer la mise en page

   Reset Filter &#9660   Reset Filter 
  Online Booking 
  >> Services Offered SERVICING MOT TESTING TYRES 
  >> Car Manufacturer ALFA ROMEO ASTON MARTIN AUDI

C’est le code Jquery JS qui crée le menu déroulant.

  function enableSelectBoxes(){ $('div.selectBox').each(function(){ $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html()); $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value')); $(this).children('span.selected,span.selectArrow').click(function(){ if($(this).parent().children('div.selectOptions').css('display') == 'none'){ $(this).parent().children('div.selectOptions').css('display','block'); } else { $(this).parent().children('div.selectOptions').css('display','none'); } }); $(this).find('span.selectOption').click(function(){ $(this).parent().parent().css('display','none'); $(this).closest('div.selectBox').attr('value',$(this).attr('value')); $(this).parent().parent().siblings('span.selected').html($(this).html()); $("#filter_type").val($(this).attr("group")); $("#filter_value").val($(this).attr("value")); }); $(this).find('span.selectOptionGroup').click(function(){ var group = $(this).attr("value"); $(this).parent().children("span[group='" + group + "']").each(function(){ if($(this).css("display") == "block") { $(this).css("display", "none"); } else { $(this).css("display", "block"); } }); }); }); }

Et enfin le CSS

 div.selectBox { position: relative; display: inline-block; cursor: default; text-align: left; line-height: 30px; clear: both; color: #888; margin-top: 20px; } span.selected { width: 167px; text-indent: 20px; border: 1px solid #ccc; border-right: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: #f6f6f6; overflow: hidden; } span.selectArrow { width: 30px; border: 1px solid #9FD573; border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-align: center; font-size: 20px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; background: #9FD573; } span.selectArrow,span.selected { position: relative; float: left; height: 30px; z-index: 1; } div.selectOptions { position: absolute; top: 28px; left: 0; width: 198px; border: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; overflow: hidden; background: #f6f6f6; padding-top: 2px; display: none; max-height: 400px; overflow: auto; } span.selectOption, span.selectOptionGroup { width: 80%; line-height: 20px; padding: 5px 10%; } span.selectOption{ display: none; } span.selectOption:hover, span.selectOptionGroup:hover { color: #f6f6f6; background: #4096ee; } span.selectOptionGroup { display: block; font-weight: bold; font-style: italic; }

Je ne pense pas que cela soit possible avec une zone de sélection html, car tous les navigateurs ne prennent pas en charge les événements de souris sur des groupes d’options dans une zone de sélection. Quelques choses que vous voudrez peut-être essayer seraient:

Jquery accordéon
```
 $(document).ready(function() {$("#accordion").accordion();}); 
```
Ceci est limité en raison du fait qu’un accordéon ne peut avoir qu’un seul élément ouvert à la fois. Si l’utilisateur veut comparer les options, tous en même temps, ils sont foutus. Vérifiez la documentation pour plus .
Utilisez une case à cocher ou quelque chose de similaire, dans un champ séparé, pour contrôler ce qui peut être sélectionné dans la zone de sélection. De cette façon, vous pourrez simplement désactiver certaines options, mais elles restront visibles pour que l’utilisateur sache ce qui leur manque. Ou vous pouvez complètement masquer les options qui résoudraient votre problème d’avoir d’énormes options.
jqTree (projet github ici)

Je n’ai jamais utilisé cela, mais cela ressemble à ce que vous voulez, à l’exception du fait qu’il n’utilise pas la boîte de sélection HTML standard.

J’ai remarqué que vous veniez de répondre à votre propre question, mais je vais quand même poster car jqTree peut être utile et que d’autres devraient savoir qu’une boîte de sélection HTML standard ne prend pas en charge les événements de souris sur optgroups .