[varpillola n1] gestione tag select con JavaScript

[var]

salve a tutti,

propongo qui di seguito un paio di funzioni JavaScript riguardo la gestione del tag select (il classico menu a tendina HTML), dato che ultimamente ho letto numerosi thread relativi a questa problematica.

doverosa, in quest'ottica, qualche notazione.
supponiamo di avere un form, di nome f, e supponiamo che al suo interno sia presente un tag select di nome menu.
quali sono, all'atto pratico, i parametri da tenere in considerazione quando si ha a che fare con i tag select? eccone qui un elenco, in relazione al nostro esempio:

var menu=document.f.menu; // riferimento al tag select
var menu.options; // array che contiene le voci del menu
var menu.options.length; // numero di voci del menu
var menu.selectedIndex; // indice della voce selezionata
var menu.options[menu.selectedIndex].value; // valore della voce selezionata
var menu.options[menu.selectedIndex].text; // testo della voce selezionata

dunque, ogni elemento del menu presenta due aspetti:

- un "text", che sarebbe l'etichetta che compare nel menu a tendina;
- un "value", che rappresenta il valore associato al "text" selezionato.

bene, adesso possiamo illustrare le funzioni.

funzione 1: menu a tendina contenente link, da utilizzare per cambiare pagina all'atto della scelta (un classico)

descrizione: tale funzione consente di creare un menu a tendina composto da link che, alla stregua di quello presente in questo forum, permette di implementare un "jump menu": appena viene selezionato un elemento, viene caricato il relativo URL.

<select name="menu" onChange="window.location.href=this.options[this.selectedIndex].value;">
<option value="http://www.repubblica.it">Repubblica.it</option>
<option value="http://html.it">HTML.it</option>
<option value="http://www.ferrari.it">Ferrari</option>
</select>

pagina di esempio

funzione 2: tag select dinamico (contenuto di un tag select relativo alla selezione fatta in un altro tag select)

descrizione: avendo due tag select, questa funzione associa il contenuto del secondo tag select alla selezione effettuata nel primo.

prima di tutto andiamo a creare un array di oggetti, in pratica l'insieme degli elementi che potrebbero comparire nel menu a contenuto dinamico:

var elementi = new Array(
{text:"Repubblica", value:"http://www.repubblica.it", indicatore:"it"},
{text:"HTML.it", value:"http://www.html.it", indicatore:"it"},
{text:"Rai", value:"http://www.rai.it", indicatore:"it"},
{text:"CNN", value:"http://www.cnn.com", indicatore:"en"},
{text:"Nasa", value:"http://www.nasa.gov", indicatore:"en"}
);

come vedete, ogni elementi dell'array è una terna che presenta, rispettivamente, il text dell'elemento, il relativo value e un indicatore, identico quest'ultimo al value di un elemento nel primo menu.

ecco qui la funzione che si occupa del popolamento del secondo menu:

function travasa(dove, valore) {
 var k=0;
 for (j=0; j<elementi.length; j++)
  if (elementi[j].indicatore==valore) {
   dove.options[k]=new Option(elementi[j].text, elementi[j].value);
   k++
  }
 dove.options.length=k;  
}

in pratica la funzione scandisce tutto l'array elementi e, per ogni elemento, verifica che ci sia una corrispondenza fra l'indicatore e il parametro "valore" della funzione, che rappresenta il value dell'elemento selezionato nel primo menu.
da notare che un elemento del menu viene creato con questa sintassi:

menu.options[i]=new Option("HTML.it", "http://www.html.it");

alla fine della funzione, viene impostata anche la lunghezza dell'array option associato al secondo menu: tale lunghezza (ossia il numero di elementi del menu) non è altro che il valore del contatore k.

la chiamata della funzione è la seguente:

<select name="s1" id="s1" onChange="travasa(this.form.s2, this.options[this.selectedIndex].value);">
 <option value="it">Siti italiani</option>
 <option value="en">Siti inglesi</option>
</select>

il tutto è dunque:

<script language="JavaScript">
<!--
var elementi = new Array(
{text:"Repubblica", value:"http://www.repubblica.it", indicatore:"it"},
{text:"HTML.it", value:"http://www.html.it", indicatore:"it"},
{text:"Rai", value:"http://www.rai.it", indicatore:"it"},
{text:"CNN", value:"http://www.cnn.com", indicatore:"en"},
{text:"Nasa", value:"http://www.nasa.gov", indicatore:"en"}
);

function travasa(dove, valore) {
 var k=0;
 for (j=0; j<elementi.length; j++)
  if (elementi[j].indicatore==valore) {
   dove.options[k]=new Option(elementi[j].text, elementi[j].value);
   k++
  }
 dove.options.length=k;  
}
//-->
</script>

pagina di esempio

funzione 3: scelta degli elementi di un tag select in relazione al contenuto di un campo text

descrizione: scrivendo in un campo text, in un menu a tendina rimangono solo gli elementi i cui value contengono almeno una lettera identica a una di quelle contenute nel campo text.

<!--
<script language="JavaScript">

var valori=new Array();
var testi=new Array();

function CaricaVettore() {
 for (i=0; i<document.form1.elementi.options.length; i++) {
 	valori[i]=document.form1.elementi.options[i].value;
	testi[i]=document.form1.elementi.options[i].text;
 }
}

function Genera(e,f) {
 var j=0;
 if (e!="") {
 var myre=new RegExp("^"+e,"g");
 for (i=0; i<testi.length; i++)
 	if ((testi[i].match(myre))) 
		{
			f.elementi.options[j]=new Option(testi[i], valori[i]);
			j++;
		}
 if (j!=0) f.elementi.options.length=j;
 else { 
 	f.elementi.options[0]=new Option('nessun valore', 'nessun valore'); 
	f.elementi.options.length=1;
 }
 }
 else {
 	for (i=0; i<valori.length; i++) {
 	document.form1.elementi.options[i]=new Option(testi[i], valori[i]);
 	}
 document.form1.elementi.options.length=valori.length;
 }
}
//-->
</script>

pagina di esempio

spero che le funzioni possano servire a qualcuno!
per chiarimenti o modifiche, come anche per correzioni e critiche, sono ovviamente a disposizione. ;)

man mano che creerò altre funzioni sul tag select, sarò contento di condividerle con voi pubblicandole in questo thread.

ciao! :)

[pela]

io proporrei un paio di modifiche alla funzione 3:
1- la funzione così com'è lascia nel menu le parole contenenti al loro interno la stringa immessa nel text input, forse potrebbe servire far sì che queste lettere siano all'inizio e non in posizione qualsiasi (ad esempio se scrivo r devono rimanere rosso e rosa, ma non verde)
per fare questo basta modificare l'espressione regolare mettendo un ^ subito dopo lo / d'apertura;
2- invece di usare l'eval io userei il costruttore dell'oggetto RegExp

quindi verrebbe:

...
var myre=new RegExp("^"+e,"g");
...

[var]

grazie dei consigli pela! :)

per quanto riguarda il primo, in fase embrionale lo script era così come tu suggerisci: effettivamente hai ragione, è più comoda la tua soluzione. ;)

effettivamente la funzione eval ha un pò di annetti sulle spalle: ergo, lasciamo spazio alle re (ho modificato lo script, come puoi leggere)!

grazie di cuore! ;)

[Francis87]

complimenti var! o dovrei dire reale.... ? :quipy:

sempre mitico! :metallica

[Dennis]

ste pillole di gestione sono di moda vedo... avevo lanciato io la moda, mi pare


complimenti var

[Dennis]

ho cercato nei miei script, ed ho trovato questo, fa la stessa cosa di var, ma visto l'argomento...

<script>
function dennis(selezionata){
ar_uno=new Array()
ar_due=new Array()
ar_tre=new Array()
ar_uno[0]=new Option('uno1','uno1')
ar_uno[1]=new Option('uno2','uno2')
ar_uno[2]=new Option('uno3','uno3')

ar_due[0]=new Option('due1','due1')
ar_due[1]=new Option('due2','due2')
ar_due[2]=new Option('due3','due3')

ar_tre[0]=new Option('tre1','tre1')
ar_tre[1]=new Option('tre2','tre2')
ar_tre[2]=new Option('tre3','tre3')

if(selezionata=="uno")array_rif=ar_uno
if(selezionata=="due")array_rif=ar_due
if(selezionata=="tre")array_rif=ar_tre
for(i=0;i<array_rif.length;i++){
document.form1.seconda.options[i]=array_rif[i]
}
}
</script>
<form name="form1">
<select name="prima" onChange="dennis(this[this.selectedIndex].value)">
<option value="uno">UNO</option>
<option value="due">DUE</option>
<option value="tre">TRE</option>
</select>
<select name="seconda">
<option value="uno1">uno1</option>
<option value="uno2">uno2</option>
<option value="uno3">uno3</option>
</select>

[var]

grazie mille Dennis, gentile come al solito! ;)
e grazie anche al buon Francis87! :)

[IMMANUEL_KANT]

Era proprio ciò che cercavo!!!

[IMMANUEL_KANT]

E' molto comodo avere una trattazione organica del tema!

Ottimo var! :metallica

[piero06]

Ottimo.... ci metterò un pò a leggerla capendo tutto !