Ver Mensaje Individual
  #2 (permalink)  
Antiguo 28/05/2012, 06:50
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: Lista multiple javascript

Hola euflipo.

No me detuve a ver bien tu ejemplo, pero me llamó la atención lo de las opciones al azar.
No se me había ocurrido, y puede tener utilidad para algunos efectos.

Te dejo una versión de select multiple que muestra 5 de 7 opciones, y no permite enviar más de 3 ni menos de 1.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MUESTRA SELECT CON 5 OPTION AL AZAR.</title>

<script type="text/javascript">
var categories= ["opc A","opc B","opc C","opc D","opc E","opc F","opc G"];
var values= ["A","B","C","D","E","F","G"];
var categCopia = [];
var valCopia = [];
var tres = [];
var selector;

function carga(){
selector = document.getElementById("List3").getElementsByTagName("option");
categCopia = categories.slice();
valCopia = values.slice();

	for (o=0; o<5; o++) {
	var elige = Math.floor(Math.random() * categCopia.length);

	selector[o].innerHTML = categCopia.splice(elige,1);
	selector[o].value = valCopia.splice(elige,1);
	selector[o].title = selector[o].value; //para confirmar valores
	}

}

function envia() {
	for(var i = 0; i < 5; i++) {
		if(selector[i].selected) {
		//alert(selector[i].value);
		tres[tres.length] = selector[i].value;
		} 
	} 

	if(tres.length > 3 || tres.length == 0) alert("Debe elegir hasta 3 opciones.");
	else alert("Enviando : "+tres);
	tres = [];
}

onload = carga;
</script>

</head>
<body>
<h2><code>select</code> múltiple que elige 5 opciones de 7 al azar, 
y permite seleccionar hasta 3.</h2>

<select id="List3" size="5" multiple="multiple" >
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<br>
<input type= button value="ENVIAR" onclick=envia() >
<br>
<input type= button value="CAMBIA OPCIONES" onclick=carga() >

</body>
</html>
Agregué un botón para recargar las opciones, que seguramente aparecerán distintas.

Lo del tooltip para "vista previa" del valor no sé si funciona en todos los navegadores (de hecho, sólo lo probé en Chrome). Igual, no le hace diferencia, es un agregado para hacer las pruebas.