+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 5 su 5

[Javascript]Popolare select tramite altro select

  1. #1
    L'avatar di Eugene
    Eugene non è in linea Scolaretto
    Buongiorno

    Pochi giorni fa ho chiesto come popolare un campo input con la selezione di un select e prontamente sono stato aiutato.

    Adesso avrei bisogno di sapere se è come è possibile popolare un secondo select in base alla selezione di un primo.

    Esempio
    il primo select ha le seguenti voci:
    colori
    numeri
    animali

    se seleziono la prima voce ("colori"), il secondo select si dovrebbe popolare come segue:
    bianco
    nero
    grigio topo
    rosso calamaro
    verde muffa

    e via dicendo.

    Mi auguro di essere stato chiaro.

    Grazie
    ℹ️ Leggi di più su Eugene ...

  2. #2
    L'avatar di Master85
    Master85 non è in linea Moderatore Globale Ultimo blog: Eclipse: Un IDE per PHP e Python
    Ciao Eugene,
    in questo caso dovresti risolvere il tutto tramite la gestione degli array in Javascript. Purtroppo al momento non ho il tempo per scriverti un esempio. Questa sera, provvedero' a scrivere qualcosa


  3. #3
    L'avatar di Master85
    Master85 non è in linea Moderatore Globale Ultimo blog: Eclipse: Un IDE per PHP e Python
    Come da copione, eccomi qui.
    Ultimamente sono troppo buono e generoso, eh eh eh
    Dovro' porre rimedio

    Eccoti un esempio: (30 minuti per sistemare il tutto ) Sono pigro

    codice HTML:
    <html>
    	<head>
    		<title>Popolare SELECT da SELECT</title>
    		<script type="text/javascript">
    			//Dichiaro l'array myMenu'
    			var myMenu = new Array();
    			
    			//Definisco le voci del menu'
    			myMenu['cat_a'] = new Array(); //Prima categoria
    			myMenu['cat_a']['value1'] = 'Prima opzione';
    			myMenu['cat_a']['value2'] = 'Seconda opzione';
    			myMenu['cat_a']['value3'] = 'Terza opzione';
    			myMenu['cat_b'] = new Array(); //Seconda categoria
    			myMenu['cat_b']['value4'] = 'Quarta opzione';
    			myMenu['cat_b']['value5'] = 'Quinta opzione';
    			myMenu['cat_b']['value6'] = 'Sesta opzione';
    			myMenu['cat_c'] = new Array(); //Seconda categoria
    			myMenu['cat_c']['value7'] = 'Settima opzione';
    			myMenu['cat_c']['value8'] = 'Ottava opzione';
    			myMenu['cat_c']['value9'] = 'Nona opzione';
    			
    			function popola_select(){
    				var select = document.forms['myForm'].mySelect; //Recupero la SELECT
    				var subselect = document.forms['myForm'].mySubSelect; //Recupero la seconda SELECT
    				
    				// Recupero la categoria selezionata
    				var cat = select.options[select.selectedIndex].value;
    				
    				//Controllo che sia stata selezionata una categoria valida
    				if(cat.length != 0){
    					//Azzero il contenuto della seconda select
    					for (var i = subselect.length - 1; i >= 0; i--)
    						subselect.remove(i);
    					
    					//Popolo la seconda Select
    					for(value in myMenu[cat]){
    						//Creo il nuovo elemento OPTION da aggiungere nella seconda SELECT
    						var NewOpt = document.createElement('option');
    						NewOpt.value = value; // Imposto il valore
    						NewOpt.text = myMenu[cat][value]; // Imposto il testo
    						
    						//Aggiungo l'elemento option
    						try{
    							subselect.add(NewOpt, null); //Metodo Standard, non funziona con IE
    						}catch(e){
    							subselect.add(NewOpt); // Funziona solo con IE
    						}
    					}
    					
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form name="myForm" method="post" action="...">
    			<select name="mySelect" onChange="popola_select()">
    				<option value="">-> Seleziona una Categoria</option>
    				<option value="cat_a">Prima Categoria</option>
    				<option value="cat_b">Seconda Catgoria</option>
    				<option value="cat_c">Terza Categoria</option>
    			</select>
    			<br />
    			<br />
    			<select name="mySubSelect"></select>
    		</form>
    	</body>
    </html>
    Ovviamente sistemalo secondo le tue esigenze e la prossima volta che ti troverai in difficolta', cerca di proporre una tua soluzione personale. Successivamente provvederemo a dare uno sguardo al tuo operato



    P.S.
    Solitamente non fornisco mai esempi completi, come giusto che sia.
    In questo caso ho fatto uno strappo alla regola. Ma solo per questa volta
    Se ti senti buono, potresti pensare ad una donazione

  4. #4
    L'avatar di Eugene
    Eugene non è in linea Scolaretto
    Ti ringrazio per l'aiuto.

    Terrò in considerazione la possibilità di una donazione, ma in questo caso il problema principale non è la mia di bontà, ma quella dei clienti che dovrebbero pagare ogni tanto.

    Buona giornata.
    ℹ️ Leggi di più su Eugene ...

  5. #5
    L'avatar di albertonissa
    albertonissa non è in linea Topo di biblioteca
    Il problema posto da milano01 è stato spostato nella sezione PHP... 'ahi sto regolamento! lo leggiamo? :P
    ℹ️ Leggi di più su albertonissa ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Popolare select tramite altro select
    Da anto16 nel forum PHP
    Risposte: 1
    Ultimo Post: 28-02-2015, 17:55
  2. [Javascript]Popolare una SELECT su evento "OnChange"
    Da w_t nel forum HTML, CSS e JavaScript
    Risposte: 2
    Ultimo Post: 23-04-2010, 19:41
  3. Risposte: 1
    Ultimo Post: 05-12-2009, 09:20
  4. Popolare 2 select
    Da milano01 nel forum PHP
    Risposte: 1
    Ultimo Post: 26-03-2008, 00:32
  5. [Javascript]Popolare input tramite select
    Da Eugene nel forum HTML, CSS e JavaScript
    Risposte: 2
    Ultimo Post: 02-10-2006, 01:06