web-dev-qa-db-fra.com

<Optgroup> sélectionnable dans la balise HTML <select>

Est-il possible de rendre le groupe d'options sélectionnable?

<select>
   <optgroup value="0" label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>
htmlhtml-selectoptgroup
60
marcin_koss

Je ne pense pas que vous puissiez le faire, mais vous pouvez facilement reproduire le style visuel avec css et n’avoir que des options dans votre sélection, donc tout est sélectionnable.

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}
<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>

L'attribut multiple vous permet de sélectionner plus d'une ligne (avec ctrl clic). Vous pouvez l'enlever si ce n'est pas ce que vous voulez. C'était pour vous montrer que tout est devenu sélectionnable et que son apparence est identique à celle de l'élément optiongroup.

49
grifos

Ce n'est pas possible avec HTML simple. Quelques navigateurs (mozilla) vous permettraient de réaliser quelque chose de similaire en css, mais au moment d'écrire ces lignes, la majorité des navigateurs (webkit, et.al) ne prennent pas en charge le style des éléments de sélection HTML.

Cependant, il existe un certain nombre de bibliothèques javascript conçues pour améliorer les widgets html-select et fournir les fonctionnalités manquantes telles que celle que vous avez demandée. Pour en nommer quelques uns:

9
Coleman

Jusqu'à ce que cela soit pris en charge par un standard html, toutes les réponses données étaient problématiques, notamment:

  1. Les attributs de classe sont autorisés sur les enfants d'une sélection, mais si/comment le style est appliqué à l'élément varie énormément entre les navigateurs et leurs versions.
  2. Préfixe avec nbsp; En conséquence, si l'élément sélectionné est plus étroit que l'option sélectionnée, l'effet visuel ne sera pas agréable, avec un texte lisible masqué à droite (voir l'exemple ci-dessous).
  3. Tous les styles que vous appliquez ne correspondent pas nécessairement au style auquel l'utilisateur du navigateur s'est habitué. gras et italique est Firefox, mais pas nécessairement tous les navigateurs. De nombreux navigateurs appliquent un style comprenant une couleur grise afin d'indiquer que l'option optgroup n'est PAS sélectionnable.
  4. Le concept d'un label optgroup sélectionné ne sera pas nécessairement attendu par l'utilisateur.

Cela m'a amené à conclure que la meilleure façon de contourner le problème est d'utiliser une bibliothèque telle que UI-Selectable pour toutes les personnes sélectionnées sur votre site (pour la cohérence), OR, utilisez la première option de le groupe opt pour représenter la sélection de tous les enfants, avec une description claire (telle que "TOUTES les voitures suédoises"):

<select multiple="multiple">
   <optgroup label="Parent">
      <option value="0" class="optionChild">ALL Children</option>
      <option value="1" class="optionChild">Child Tag 1</option>
      <option value="2" class="optionChild">Child Tag 2</option>
   </optgroup>
</select>

.my-select {
  width: 60px;
}
<select class="my-select">
  <option>Parent</option>
  <option selected="selected">&nbsp;&nbsp;&nbsp;Child</option>
</select>
4
Brent

une petite solution différente ..

.optionGroup {
    font-weight: bold;

}
<select>
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1">&nbsp;&nbsp;&nbsp;Child Tag1</option>
    <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option>
</select>
2
Yura Gymenetskiy

La réponse de @ grifos n'est pas prise en charge dans les navigateurs WebKit et ne fonctionnait pas lorsque Testé dans IE 11.

Une suggestion pourrait être d’utiliser une liste Unordered/Ordered et de la styler avec CSS, puis d’ajouter la fonctionnalité avec JavaScript/jQuery.

J'ai déjà vu une belle implémentation de cela dans le passé, ça peut avoir l'air vraiment glissant!

0
mgilberties

Cela vous donnera l'impression d'être dans une liste déroulante avec optgroups sélectionnables. Laissé cela très simple, mais vous pouvez styler à votre guise.

.hide {
  display:none;
}
.show {
  display:block;
}
.selected.button {
  display:block;
  font-weight: bold;
}
button {
  text-align: left;
  min-width: 200px;
  margin-left: 10px;
  border: 0px;
  background: #eee;
  display: block;
}
#value_display {
  width: 210px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-left: 8px;
}
</style>
<html>
<body>


<!-- Div is a display and also trigger for displaying dropdown -->
<div id="value_display" onclick="showOptions(this.value)">
  opt 0
</div>

<!-- setting height and doing overflow-y allows dropdown list with scrollbox -->
<div id="select_div" class="hide" style="height: 80px; overflow-y: scroll;">

<button class="selected button" onclick="select(this.id)" id="opt 0">opt 0</button>
<button onclick="select(this.id)" id="opt 0-1" style="padding-left: 15px">opt 0-1</button>
<button onclick="select(this.id)" id="opt 0-2" style="padding-left: 15px">opt 0-2</button>
<button onclick="select(this.id)" id="opt 0-3" style="padding-left: 15px">opt 0-3</button>
<button onclick="select(this.id)" id="opt 0-4" style="padding-left: 15px">opt 0-4</button>
<button class="" onclick="select(this.id)" id="opt 1">opt 1</button>
<button onclick="select(this.id)" id="opt 1-1" style="padding-left: 15px">opt 1-1</button>
<button onclick="select(this.id)" id="opt 1-2" style="padding-left: 15px">opt 1-2</button>
<button onclick="select(this.id)" id="opt 1-3" style="padding-left: 15px">opt 1-3</button>
<button onclick="select(this.id)" id="opt 1-4" style="padding-left: 15px">opt 1-4</button>

<script>

var showingOptions = false;
var showingID = document.getElementById('value_display').innerHTML;

function showOptions() {
 if(showingOptions) {
   document.getElementById('select_div').className = "hide";
   showingOptions = false;
 }
 else {
   document.getElementById('select_div').className = "show";
   showingOptions = true;
 }
}
function select(id){
  document.getElementById(id).className = 'selected button';
  document.getElementById(showingID).className = 'show';
  showingID = id;
  document.getElementById('value_display').innerHTML = id;
  document.getElementById('select_div').className = 'hide';
}

</script>
0
Steven Kaspar