w3s - Seleccionable<optgroup> en la etiqueta HTML<select>
select with subselect html (7)
¿Hay alguna manera de hacer que el grupo de opciones sea seleccionable?
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
Esto le dará la sensación de una lista desplegable con grupos de opciones seleccionables. Déjalo muy simple pero puedes estilizar a tu gusto.
.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>
Esto no es posible con html simple. Algunos navegadores (mozilla) le permitirían lograr algo similar utilizando css, pero en el momento de escribir esto, la mayoría de los navegadores (webkit, et.al) no son compatibles con el estilo de los elementos de selección de html.
Sin embargo, hay una serie de bibliotecas de javascript diseñadas para mejorar los widgets de selección de html y proporcionar características faltantes como la que has solicitado. Para nombrar unos pocos:
Hasta que esto no sea compatible con un estándar html, todas y cada una de las respuestas dadas han sido problemáticas, incluyendo:
- Los atributos de clase se permiten en los elementos secundarios de una selección, pero si / cómo se aplica el estilo al elemento varía enormemente entre los navegadores y las versiones del navegador.
- Prefijando con & nbsp; tendrá la consecuencia de que si el elemento de selección es más estrecho que la opción seleccionada, el efecto visual no será agradable, con el texto legible oculto a la derecha (vea el ejemplo a continuación).
- Cualquier estilo que aplique no encajará necesariamente con el estilo al que se ha acostumbrado el usuario del navegador. negrita y cursiva es Firefox, pero no necesariamente todos los navegadores. Muchos navegadores aplican un estilo que incluye color gris para ayudar a indicar que el grupo opcional NO es seleccionable
- El concepto de una etiqueta de selección de grupo optativo no será necesariamente esperado por el usuario.
Esto me ha llevado a concluir que la mejor manera de solucionar el problema es usar una biblioteca como UI-Selectable para todas las selecciones a lo largo de su sitio (para mantener la coherencia), O utilizar la primera opción en el grupo opt para representar a todos los niños seleccionados, con una descripción clara (como ''TODOS los autos suecos''):
<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"> Child</option>
</select>
La pregunta no está muy clara, pero es esto lo que está buscando:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
La respuesta de @grifos no es compatible con los navegadores WebKit y no funcionó cuando se probó en IE 11.
Una sugerencia podría ser usar una lista desordenada / ordenada y personalizarla con CSS, luego agregar la funcionalidad con JavaScript / jQuery.
He visto una buena implementación de esto en el pasado, ¡puede parecer realmente ingenioso!
No creo que puedas, pero puedes reproducir fácilmente el estilo visual con css y, por lo tanto, solo tienes opciones en tu selección, por lo que todo es seleccionable.
.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>
El atributo múltiple le permite seleccionar más de una fila (con ctrl clic). Puedes eliminarlo si no es lo que quieres. Fue para mostrarle que todo se convirtió en seleccionable y que se ve igual que con el elemento del grupo de opciones.
Una solución un poco diferente ...
.optionGroup {
font-weight: bold;
}
<select>
<option value="0" class="optionGroup">Parent Tag</option>
<option value="1"> Child Tag1</option>
<option value="2"> Child Tag2</option>
</select>