¿Hay alguna manera de hacer que el grupo de opciones sea seleccionable?<optgroup> seleccionable en HTML <select> etiqueta
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
no creo que se puede, pero se puede reproducir fácilmente el estilo visual con css y por tanto sólo tiene opciones en su selección, para que todo sea 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 permiten seleccionar más de una fila (con Ctrl + clic). Puedes eliminarlo si no es lo que quieres. Fue para mostrarle que todo se puede seleccionar y que se ve igual que con el elemento optiongroup.
La pregunta no es muy clara, pero ¿es esto lo que busca:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
lo siento por no ser lo suficientemente clara. Quiero que el grupo de selección sea seleccionable de la misma manera que seleccionaste la opción –
@ respuesta de los grifos no se admite en los navegadores WebKit y no funcionaba cuando se prueba en IE 11.
Una sugerencia podría ser el uso de una lista desordenada/ordenados y para diseñarlo con CSS, a continuación, añadir la funcionalidad con JavaScript/jQuery.
He visto una buena implementación de esto en el pasado, ¡puede verse muy resbaladizo!
Esto no es posible con html simple. Algunos navegadores (mozilla) le permiten lograr algo similar usando css, pero al momento de escribir esto, la mayoría de los navegadores (webkit, et.al) no admiten el diseño de elementos de selección html.
Sin embargo, hay una serie de bibliotecas javascript diseñadas para mejorar los widgets de selección html y proporcionar características que faltan, como la que ha solicitado. Para nombrar algunos:
Seleccionar2 es excelente – CVertex
Esto le dará la sensación desnuda de una lista desplegable con optgroups seleccionables. Lo dejé muy claro, pero puedes darle estilo al contenido de tu corazón.
.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>
un poco de solución 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>Hasta que esto se apoya en un estándar HTML, cualquiera y todas las respuestas dadas han sido problemáticos , incluido:
Esto me ha llevado a la conclusión de la mejor manera de solucionar el problema es o bien utilizar una biblioteca como interfaz de usuario seleccionables para todas selecciona a través de su sitio (por consistencia), o utilizar la primera opción en el optgroup a representar a la selección de todos los niños, con una descripción clara (como «todos los vehículos de Suecia):
<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>
Intenté esto, pero solo funciona en Firefox –
Lo siento, olvidé la opción de estilo es un lío en los navegadores web – grifos
Al menos puedes crear una sangría al agregar – grifos