Lista multiple javascript

euflipo · #1 (**permalink**) 27/05/2012, 03:44

Hola gente!
estoy intentando hacer una lista múltiple en javascript, que solo me permita seleccionar como máximo 3 elementos de la lista, y que al mismo tiempo esta lista aparezca en orden aleatorio (random).
Alguien me puede echar un cable?

Asi es como lo tengo montado:

En el head tengo la lista:

categories["LACO"] = ["opcion A","opción B","opcion C","opción D","opcion E","opción F"];

var nLists = 4; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));

for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function init() {
fillSelect('startList',document.forms[0]['List1'])

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>

y en el body:

<select name="List3" size="10" multiple="" class="field" onChange="fillSelect(this.value,this.form['List4'])">
<option selected="">Seleccionar 3 elementos</option>
</select>

<input type="url" name="List4" onChange="getValue(this.value)">

muchas gracias,

saludos!

furoya · #2 (**permalink**) 28/05/2012, 06:50

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.