opciones - listas dinamicas html
Anidar grupos de opciones en una lista desplegable/seleccionar (8)
Creo que si tiene algo estructurado y complejo, podría considerar algo más que un solo cuadro desplegable.
He creado un cliente c # DropDownList control que puede procesar sus contenidos son optgroups (no desde el principio, he editado un código encontrado en internet, aunque entiendo exactamente lo que está haciendo), y funciona bien.
Sin embargo, ahora me he encontrado con una situación en la que necesito tener dos niveles de sangría en mi menú desplegable, es decir,
<select>
<optgroup label="Level One">
<option> A.1 </option>
<optgroup label="Level Two">
<option> A.B.1 </option>
</optgroup>
<option> A.2 </option>
</optgroup>
</select>
Sin embargo, por lo que yo sé, esto se renderizará como los grupos opcionales normales.
¿Hay alguna manera de producir este comportamiento anidado?
Esto está bien, pero si agrega la opción de que bruja no está en optgroup se pone defectuoso.
<select>
<optgroup label="Level One">
<option> A.1 </option>
<optgroup label="nbsp;nbsp;nbsp;nbsp;Level Two">
<option>nbsp;nbsp;nbsp;nbsp; A.B.1 </option>
</optgroup>
<option> A.2 </option>
</optgroup>
<option> A </option>
</select>
Sería mucho mejor si usa CSS y cierra el grupo de opciones de inmediato:
<select>
<optgroup label="Level One"></optgroup>
<option style="padding-left:15px"> A.1 </option>
<optgroup label="Level Two" style="padding-left:15px"></optgroup>
<option style="padding-left:30px"> A.B.1 </option>
<option style="padding-left:15px"> A.2 </option>
<option> A </option>
</select>
La especificación de HTML aquí está realmente rota. Debe permitir grupos de opciones anidados y recomendar agentes de usuario que los representen como menús anidados. En cambio, solo se permite un nivel de grupo de opción . Sin embargo, sí tienen que decir lo siguiente sobre el tema:
Nota. Se informa a los implementadores que las versiones futuras de HTML pueden extender el mecanismo de agrupación para permitir grupos anidados (es decir, los elementos OPTGROUP pueden anidar). Esto permitirá a los autores representar una jerarquía de opciones más rica.
Y los agentes de usuario podrían comenzar a usar submenús para representar optgoups en lugar de mostrar títulos antes del primer elemento de opción en un grupo de selección como lo hacen ahora.
Me gusta mucho la solución anterior de Broken Arrow en esta publicación. Acabo de mejorar / cambiarlo un poco para que las llamadas etiquetas se puedan alternar y no se consideren opciones. He usado una pequeña parte de jQuery, pero esto podría hacerse sin jQuery.
He reemplazado las etiquetas intermedias (sin etiquetas de hoja) con enlaces, que llaman a una función al hacer clic. Esta función se encarga de alternar el siguiente div del enlace cliqueado, de modo que expande / contrae las opciones. Esto evita la posibilidad de seleccionar un elemento intermedio en la jerarquía, que generalmente es algo deseado. Hacer una variante que permita seleccionar elementos intermedios debería ser fácil.
Este es el html modificado:
<div class="NestedSelect">
<a onclick="toggleDiv(this)">Fruit</a>
<div>
<label>
<input type="radio" name="MySelectInputName"><span>Apple</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Banana</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Orange</span></label>
</div>
<a onclick="toggleDiv(this)">Drink</a>
<div>
<label>
<input type="radio" name="MySelectInputName"><span>Water</span></label>
<a onclick="toggleDiv(this)">Soft</a>
<div>
<label>
<input type="radio" name="MySelectInputName"><span>Cola</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Soda</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
</div>
<a onclick="toggleDiv(this)">Hard</a>
<div>
<label>
<input type="radio" name="MySelectInputName"><span>Bear</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Whisky</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Vodka</span></label>
<label>
<input type="radio" name="MySelectInputName"><span>Gin</span></label>
</div>
</div>
</div>
Una pequeña función javascript / jQuery:
function toggleDiv(element) {
$(element).next(''div'').toggle(''medium'');
}
Y el CSS:
.NestedSelect {
display: inline-block;
height: 100%;
border: 1px Black solid;
overflow-y: scroll;
}
.NestedSelect a:hover, .NestedSelect span:hover {
background-color: #0092ff;
color: White;
cursor: pointer;
}
.NestedSelect input[type="radio"] {
display: none;
}
.NestedSelect input[type="radio"] + span {
display: block;
padding-left: 0px;
padding-right: 5px;
}
.NestedSelect input[type="radio"]:checked + span {
background-color: Black;
color: White;
}
.NestedSelect div {
display: none;
margin-left: 15px;
border-left: 1px black
solid;
}
.NestedSelect label > span:before, .NestedSelect a:before{
content: ''- '';
}
.NestedSelect a {
display: block;
}
Necesitaba una solución limpia y liviana (por lo que no jQuery y similares), que se vería exactamente como HTML simple, también continuaría funcionando cuando solo HTML está predefinido (por lo que javascript solo lo mejorará), y que permitirá buscar comenzando letras ( incluyendo letras nacionales UTF-8) si es posible donde no agrega un peso extra. También debe funcionar rápido en navegadores muy lentos (piense en rPi, preferiblemente no se ejecuta javascript después de cargar la página).
En Firefox utiliza la identificación de CSS y, por lo tanto, permite buscar por letras, y en otros navegadores usará anteponiendo (pero allí no es compatible con la búsqueda rápida por letras). De todos modos, estoy bastante contento con los resultados.
Puedes probarlo en acción aquí
Dice así:
CSS:
.i0 { }
.i1 { margin-left: 1em; }
.i2 { margin-left: 2em; }
.i3 { margin-left: 3em; }
.i4 { margin-left: 4em; }
.i5 { margin-left: 5em; }
HTML (clase "i1", "i2" etc. denota nivel de identación):
<form action="/filter/" method="get">
<select name="gdje" id="gdje">
<option value=1 class="i0">Svugdje</option>
<option value=177 class="i1">Bosna i Hercegovina</option>
<option value=190 class="i2">Babin Do</option>
<option value=258 class="i2">Banja Luka</option>
<option value=181 class="i2">Tuzla</option>
<option value=307 class="i1">Crna Gora</option>
<option value=308 class="i2">Podgorica</option>
<option value=2 SELECTED class="i1">Hrvatska</option>
<option value=5 class="i2">Bjelovarsko-bilogorska županija</option>
<option value=147 class="i3">Bjelovar</option>
<option value=79 class="i3">Daruvar</option>
<option value=94 class="i3">Garešnica</option>
<option value=329 class="i3">Grubišno Polje</option>
<option value=368 class="i3">Čazma</option>
<option value=6 class="i2">Brodsko-posavska županija</option>
<option value=342 class="i3">Gornji Bogićevci</option>
<option value=158 class="i3">Klakar</option>
<option value=140 class="i3">Nova Gradiška</option>
</select>
</form>
<script>
<!--
window.onload = loadFilter;
// -->
</script>
JavaScript:
function loadFilter() {
''use strict'';
// indents all options depending on "i" CSS class
function add_nbsp() {
var opt = document.getElementsByTagName("option");
for (var i = 0; i < opt.length; i++) {
if (opt[i].className[0] === ''i'') {
opt[i].innerHTML = Array(3*opt[i].className[1]+1).join(" ") + opt[i].innerHTML; // this means " " x (3*$indent)
}
}
}
// detects browser
navigator.sayswho= (function() {
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*([/d/.]+)/i) || [];
if(/trident/i.test(M[1])){
tem= //brv[ :]+(/d+(/./d+)?)/g.exec(ua) || [];
return ''IE ''+(tem[1] || '''');
}
M= M[2]? [M[1], M[2]]:[navigator.appName, navigator.appVersion, ''-?''];
if((tem= ua.match(/version//([/./d]+)/i))!= null) M[2]= tem[1];
return M.join('' '');
})();
// quick detection if browser is firefox
function isFirefox() {
var ua= navigator.userAgent,
M= ua.match(/firefox///i);
return M;
}
// indented select options support for non-firefox browsers
if (!isFirefox()) {
add_nbsp();
}
}
Ok, si alguien alguna vez lee esto: la mejor opción es agregar cuatro s en cada nivel extra de sangría, ¡parece!
asi que:
<select>
<optgroup label="Level One">
<option> A.1 </option>
<optgroup label=" Level Two">
<option> A.B.1 </option>
</optgroup>
<option> A.2 </option>
</optgroup>
</select>
Sé que esto fue hace bastante tiempo, sin embargo, tengo un poco más para agregar:
Esto no es posible en HTML5 ni en especificaciones anteriores, ni tampoco se ha propuesto en HTML5.1. He hecho una solicitud a la lista de correo public-html-comments , pero veremos si surge algo.
De todos modos, aunque esto no es posible con <select> , puede lograr un efecto similar con el siguiente HTML, más algunos CSS para la belleza:
<ul>
<li>
<input type="radio" name="location" value="0" id="loc_0" />
<label for="loc_0">United States</label>
<ul>
<li>
Northeast
<ul>
<li>
<input type="radio" name="location" value="1" id="loc_1" />
<label for="loc_1">New Hampshire</label>
</li>
<li>
<input type="radio" name="location" value="2" id="loc_2" />
<label for="loc_2">Vermont</label>
</li>
<li>
<input type="radio" name="location" value="3" id="loc_3" />
<label for="loc_3">Maine</label>
</li>
</ul>
</li>
<li>
Southeast
<ul>
<li>
<input type="radio" name="location" value="4" id="loc_4" />
<label for="loc_4">Georgia</label>
</li>
<li>
<input type="radio" name="location" value="5" id="loc_5" />
<label for="loc_5">Alabama</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="radio" name="location" value="6" id="loc_6" />
<label for="loc_6">Canada</label>
<ul>
<li>
<input type="radio" name="location" value="7" id="loc_7" />
<label for="loc_7">Ontario</label>
</li>
<li>
<input type="radio" name="location" value="8" id="loc_8" />
<label for="loc_8">Quebec</label>
</li>
<li>
<input type="radio" name="location" value="9" id="loc_9" />
<label for="loc_9">Manitoba</label>
</li>
</ul>
</li>
</ul>
Como beneficio extra adicional, esto también significa que usted puede permitir la selección de los <optgroups> . Esto podría ser útil si tuviera, por ejemplo, categorías anidadas donde las categorías entran en gran detalle y desea permitir a los usuarios seleccionar más arriba en la jerarquía.
Todo esto funcionará sin JavaScript, sin embargo, es posible que desee agregar algunos para ocultar los botones de opción y luego cambiar el color de fondo del elemento seleccionado o algo así.
Tenga en cuenta que esto dista mucho de ser una solución perfecta, pero si necesita absolutamente una selección anidada con una compatibilidad razonable entre navegadores, probablemente sea lo más cercano que pueda llegar.
<style>
.NestedSelect{display: inline-block; height: 100px; border: 1px Black solid; overflow-y: scroll;}
.NestedSelect label{display: block; cursor: pointer;}
.NestedSelect label:hover{background-color: #0092ff; color: White;}
.NestedSelect input[type="radio"]{display: none;}
.NestedSelect input[type="radio"] + span{display: block; padding-left: 0px; padding-right: 5px;}
.NestedSelect input[type="radio"]:checked + span{background-color: Black; color: White;}
.NestedSelect div{margin-left: 15px; border-left: 1px Black solid;}
.NestedSelect label > span:before{content: ''- '';}
</style>
<div class="NestedSelect">
<label><input type="radio" name="MySelectInputName"><span>Fruit</span></label>
<div>
<label><input type="radio" name="MySelectInputName"><span>Apple</span></label>
<label><input type="radio" name="MySelectInputName"><span>Banana</span></label>
<label><input type="radio" name="MySelectInputName"><span>Orange</span></label>
</div>
<label><input type="radio" name="MySelectInputName"><span>Drink</span></label>
<div>
<label><input type="radio" name="MySelectInputName"><span>Water</span></label>
<label><input type="radio" name="MySelectInputName"><span>Soft</span></label>
<div>
<label><input type="radio" name="MySelectInputName"><span>Cola</span></label>
<label><input type="radio" name="MySelectInputName"><span>Soda</span></label>
<label><input type="radio" name="MySelectInputName"><span>Lemonade</span></label>
</div>
<label><input type="radio" name="MySelectInputName"><span>Hard</span></label>
<div>
<label><input type="radio" name="MySelectInputName"><span>Bear</span></label>
<label><input type="radio" name="MySelectInputName"><span>Whisky</span></label>
<label><input type="radio" name="MySelectInputName"><span>Vodka</span></label>
<label><input type="radio" name="MySelectInputName"><span>Gin</span></label>
</div>
</div>
</div>