¿Qué es la etiqueta optgroup?
Es una etiqueta HTML que se usa para agrupar las opciones dadas en la etiqueta <select> . Esto combina las opciones en diferentes grupos que tienen diferentes etiquetas.
Sintaxis:
HTML
<optgroup label="text"> <option value="One">One</option> <option value="Two">Two</option> </optgroup>
Si necesitamos agregar una imagen antes de la etiqueta optgroup usando bootstrap, entonces tenemos que colocar la etiqueta «imagen» en la etiqueta dando la ubicación de origen de la imagen con el nombre de la etiqueta.
Ejemplo: El siguiente ejemplo demuestra que el grupo de opciones tiene una imagen antes de una etiqueta usando Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
</script>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js">
</script>
<style>
.bootstrap-select img {
width: 16px;
}
</style>
</head>
<body>
<select class="selectpicker">
<optgroup label=
"<img src='https://openmoji.org/data/color/svg/1F600.svg'> Numbers">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label=
"<img src='https://openmoji.org/data/color/svg/1F923.svg'> Digits">
<option value="Four">4</option>
<option value="Five">5</option>
<option value="Six">6</option>
</optgroup>
</select>
<script>
$('.selectpicker').on('shown.bs.select', function () {
$('.bootstrap-select .dropdown-header').each(function () {
if ((this.dataset.unescaped || '1') == '1') {
let element = $(this);
element.html(element.text());
element.attr('data-unescaped', '0');
}
})
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA