[JS] Selects dinamici e intelligenti

**Thanatos86** · 01-10-2005, 16:02

Immaginate una pagina contentente 6 select diversi (lunedì, martedì, .... sabato) ognuno dei quali contiene a sua volta 6 option, IDENTICI per tutti e 6 selects:

Codice PHP:


<select name="lunedì">

<option name="1">1</option>

<option name="2">2</option>

<option name="...">...</option>

<option name="6">6</option>

</select>



<select name="martedì">

<option name="1">1</option>

<option name="2">2</option>

<option name="...">...</option>

<option name="6">6</option>

</select>



<select name="...">

// 

</select>



and so on

Vorrei fare in modo che se si seleziona la scelta xx al primo select, questa venga eliminata dagli option degli altri select (e magari anche un bottone reset per ripristinare tutto...)

Allora, chi mi aiuta a rendere questi selects intelligenti?!

**badaze** · 01-10-2005, 22:48

Avevo postato uno script simile qui ..... peccato che la ricerca sia disabilitata .... e che lo script non sia su questo pc.

**Thanatos86** · 02-10-2005, 10:25

allora riproverò quando sarà riabilitata....
grazie, ti farò sapere

**lukas** · 04-10-2005, 19:46

mi intrometto perchè la soluzione mi interessa

**badaze** · 05-10-2005, 09:22

Ecco ma per IE

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function populate(aSelect) {
 //------------ Creazione opzione 
 newOption = document.createElement('OPTION');
 ind       = aSelect.options.length;
 aSelect.add(newOption,ind);
 newOption.value = "A";
 newOption.text  = "A";
 //------------ Creazione opzione 
 newOption = document.createElement('OPTION');
 ind       = aSelect.options.length; 
 aSelect.add(newOption,ind);
 newOption.value = "B";
 newOption.text  = "B";
 //------------ Creazione opzione 
 newOption = document.createElement('OPTION');
 ind       = aSelect.options.length;	
 aSelect.add(newOption,ind);
 newOption.value = "C";
 newOption.text  = "C";
 //------------ Creazione opzione 
 newOption = document.createElement('OPTION');
 ind       = aSelect.options.length;	
 aSelect.add(newOption,ind);
 newOption.value = "D";
 newOption.text  = "D";
 //------------ Creazione opzione 
 newOption = document.createElement('OPTION');
 ind       = aSelect.options.length; 
 aSelect.add(newOption,ind);
 newOption.value = "E";
 newOption.text  = "E";  
} // function populate(aSelect)

function svuota(aSelect) {
 //---------- Prima svuoto tutti valori tranne quello selezionato nella select selezionata
 value      = aSelect.value;
 numElement = aSelect.length;
 var i = 0;
 for (j=numElement-1;j>=0;j--) {
  curOption = aSelect.options(j);
  if (curOption.value != value) {
	  aSelect.remove(j);
	} // if (curOption.value != value) 
 } // for (j=numElement-1;j>=0;j--)
 //---------- adesso per ogni select del div (parent) rimuovo il valore scelto
 svuota2(aSelect,'sel1');
 svuota2(aSelect,'sel2');
 svuota2(aSelect,'sel3');
 svuota2(aSelect,'sel4');
 svuota2(aSelect,'sel5');
} // function svuota(unValore)

function svuota2(aSelect,selectDaSvuotare) {
 if (aSelect.id == selectDaSvuotare) {
  return;
 } // if (aSelect.id == selectDaSvuotare)
 var objSelectDaSvuotare = document.getElementById(selectDaSvuotare);
 numElement = objSelectDaSvuotare.length;
 for (j=numElement-1;j>=0;j--) {
  curOption = objSelectDaSvuotare.options(j);
  if (curOption.value == aSelect.value) {
	  objSelectDaSvuotare.remove(j);
	} // if (curOption.value == aSelect.value)
 } // for (j=numElement-1;j>=0;j--)
} // function svuota2(aSelect,selectDaSvuotare)

function ripopolaTutto() {
 ripopola('sel1');
 ripopola('sel2');
 ripopola('sel3');
 ripopola('sel4');
 ripopola('sel5');
} // function ripopolaTutto()

function ripopola(selectDaRipopolare) {
 var aSelect = document.getElementById(selectDaRipopolare);
 aSelect.innerHTML = '';
 populate(aSelect)
} // function ripopola(selectDaRipopolare)

//-->
</script>

</head>
<body>
<div id="group1">
<select id="sel1" onchange="svuota(this)"></select>
<select id="sel2" onchange="svuota(this)"></select>
<select id="sel3" onchange="svuota(this)"></select>
<select id="sel4" onchange="svuota(this)"></select>
<select id="sel5" onchange="svuota(this)"></select>
</div>



<input type="button" value="Ripopola" onclick="ripopolaTutto()">

<script language="JavaScript" type="text/javascript">
<!--
populate(document.getElementById('sel1'));
populate(document.getElementById('sel2'));
populate(document.getElementById('sel3'));
populate(document.getElementById('sel4'));
populate(document.getElementById('sel5'));
//-->
</script>

</body>
</html>

Discussione: [JS] Selects dinamici e intelligenti

Strumenti discussione

Ricerca discussione

Visualizza

[JS] Selects dinamici e intelligenti

Permessi di invio