Popolare una select a seconda della selezione precedente

**mircov** · 07-06-2007, 21:52

Salve ragazzi. Ho una lista di marche ed una lista di collezioni. Ogni marca ha tot collezioni ed una collezione può far riferimento solo ad una marca.

Popolata una select con la lista di marche in questo modo

codice:

<option value="id_marca">Nome_marca</option>

vorrei che selezionata la marca in modo automatico mi venissero mostrate solo le collezioni di quella marca. La select delle collezioni è così:

codice:

<option value="id_collezione">Nome_collezione</option>

Il tutto viene generato in modo dinamico tramite PHP e, volendo, posso anche cambiare il modo in cui vengono create le select. Ho provato ad usare uno script che ho trovato su javascript.html.it ma sembra non funzionare con i miei dati (ma sicuramente ho sbagliato io ad implementarlo) ed inoltre non mi sembra che la soluzione adottata sia delle migliori (almeno logicamente dato che ne ho visti di più semplici).

Non credo sia una cosa tanto difficile ma io purtroppo non conosco affatto javascript e non so proprio da dove cominciare anche a voler modificare uno script esistente! Mi date una mano? Grazie mille! Ciao!

**badaze** · 07-06-2007, 23:18

Prova questo. Ci sono comunque tanti modi per arrivarci.

codice:

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

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.hidden {display:none}
.shown  {display:block}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function populate(aValue) {
 //------- Select di destino
 var destino  = document.getElementById('vetture');
 if (aValue == "-") {
  //-------- Se ho tolto la selezione sul marchio
  document.getElementById('vetture').value     = '-';
  document.getElementById('vetture').className = "hidden";
	elimina(destino);
  return;
 } // if (aValue == "-") 
  //------- Select di partenza 
 var marchio = "vetture" + aValue;
 var partenza = document.getElementById(marchio);

 elimina(destino);
 copy(partenza,destino);
 document.getElementById('vetture').value     = '-';
 //
 document.getElementById('vetture').className = "shown";
} // function populate(aValue)

function copy(sel1,sel2) {
 //------ Copio il contenuto di sel1 (partenza) in sel2 (destino) 
 var i = 0;
 for (i=0;i<sel1.options.length;i++) {
  //-------- Ricavo la riga selezionata
  var oCurOption    = sel1.options.item(i);
  //-------- Creo una nuova opzione
  var oOption       = document.createElement("OPTION");
  //-------- La aggiungo alla seconda select
  sel2.options.add(oOption);
  //-------- Assegno i valori della prima select alla seconda
  oOption.value     = oCurOption.value; 
  oOption.text      = oCurOption.text ;
 } // for (i=0;i<sel1.options.length;i++)
} // function copy(sel1,sel2)

function elimina(sel2) {
 //------ Elimino il contenuto di sel2 (destino)
 var i = 0;
 for (i=sel2.options.length;i>=0;i--) {
  sel2.options.remove(i);
 } // for (i=sel2.options.length;i>=0;i--)
} // function elimina(sel2)

//-->
</script>

</head>
<body>
<table summary="">
 <tr>
  <td>Marchio</td>
	<td>
			<select id="marchio" onchange="populate(this.value)">
 							<option value="-">Seleziona un marchio</option>
 							<option value="1">Fiat</option>
 							<option value="2">Renault</option>
 							<option value="3">Peugeot</option>
 							<option value="4">Audi</option>
			</select>	
	</td>
 </tr>
 <tr>
  <td>Macchina</td>
	<td>
			<select class="hidden" id="vetture">
			</select>	
	</td>
 </tr> 
</table>







<select class="hidden" id="vetture1">
 <option value="-">Seleziona una macchina</option>
 <option value="11">Panda</option>
 <option value="12">Bravo</option>
 <option value="13">Ulysse</option>
 <option value="14">Croma</option>
 <option value="15">Sedici</option>
 <option value="16">Punto</option>
</select>


<select class="hidden" id="vetture2">
 <option value="-">Seleziona una macchina</option>
 <option value="11">Clio</option>
 <option value="12">Clio campus</option>
 <option value="13">Modus</option>
 <option value="14">Megane</option>
 <option value="15">Laguna II</option>
 <option value="16">Vel Satis</option>
</select>


<select class="hidden" id="vetture3">
 <option value="-">Seleziona una macchina</option>
 <option value="11">107</option>
 <option value="12">1007</option>
 <option value="13">207</option>
 <option value="14">307</option>
 <option value="15">407</option>
 <option value="16">807</option>
</select>


<select class="hidden" id="vetture4">
 <option value="-">Seleziona una macchina</option>
 <option value="11">A2</option>
 <option value="12">A3</option>
 <option value="13">A4</option>
 <option value="14">A6</option>
 <option value="15">A8</option>
 <option value="16">Q7</option>
</select>

</body>
</html>

**mircov** · 08-06-2007, 18:40

Ok, grazie mille per lo script. Appena lo provo ti faccio sapere come va.

Discussione: Popolare una select a seconda della selezione precedente

Strumenti discussione

Ricerca discussione

Visualizza

Popolare una select a seconda della selezione precedente

Permessi di invio