Popolare diverse select da un unico modello

**delvento** · 29-01-2017, 16:18

Salve, sono alle prime armi con javascript.
Seguo il vostro sito da diverso tempo e mi ha sempre aiutato specie per il linguaggio html e VB.
Purtroppo adesso non trovo soluzione ad un problema e ho deciso di scrivervi.

Voglio creare un modello di una select per poi riusarla piï¿½ volte all'interno di una pagina senza dovere copiare ed incollare la stessa select. Sopratutto perchï¿½ se ho intenzione di cambiare testi e valori della select sarebbe problematico e lungo apportare ogni modifica a tutte le select singole.

Ho pensato a due strade:

1 - mettere la select fuori dal form, ma non ho idea nï¿½ come nï¿½ dove metterla nï¿½ se ï¿½ la strada giusta.. cosï¿½ poi da richiamarla ogni volta che mi serve nel form con un semplice:

<select name="MiaSelect"></select>

2 - creare una funzione javascript che crei un "modello" grazie ad un array bidimensionale.
(bidimensionale per definire sia i text che i value di ogni singola voce)

e poi nel form popolare la select ogni qualvolta si carica la pagina o al limite con un bottone:

<input type="button" value="crea select" onclick="popolaSelect(this.form)">

Ho iniziato cosï¿½, so che ï¿½ confuso... ma rispecchia proprio quanto sono confuso io:
--------------------------------------------------------------------------------------------------------
<script type="text/javascript">
//Dichiaro l'array
var arr = new Array();
//Definisco le voci della matrice in modo che poi nella select 7 sia il value di Cane, e 84 il value di Abete
arr[0][0] = 'Cane';
arr[0][1] = 7;
arr[1][0] = 'Abete';
arr[1][1] = 84;

function popola_select(){

//qui dovrei impostare un ciclo for per la popolazione della select, ma non ho idea nï¿½ da dove partire, nï¿½ che istruzioni usare per l'effettiva popolazione di ogni singola voce della select

}

</script

<form>

<input type="button" value="crea select" onclick="popolaSelect(this.form)">
<select name="miaselect" ></select>

</form>
--------------------------------------------------------------------------------

Potresti aiutarmi? Grazie in anticipo.

**badaze** · 29-01-2017, 22:26

Un approccio.

codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
 //Dichiaro l'array 
 var arr = new Array();
 arr[0] = new Array(7,'Cane');
 arr[1] = new Array(84,'Abete');
 
 //Dichiaro l'array 
 var arr2 = new Array();
 arr2[0]  = new Array(1,'Uno');
 arr2[1]  = new Array(2,'Due'); 
 arr2[2]  = new Array(3,'Tre'); 
 arr2[3]  = new Array(4,'Quattro'); 
 arr2[4]  = new Array(5,'Cinque'); 


 function popola_select(idDiv, idSelect, anArray){
   var html = '<select name="'+idSelect+'" id="'+idSelect+'" >';
  for (i=0;i<anArray.length;i++) {
    option = '<option value="'+anArray[i][0]+'">'+anArray[i][1]+'</option>';
   html   = html+option
  }
  html = html+'</select>';
  document.getElementById(idDiv).innerHTML = html;
 }
 </script
</head>
<body>

 <form>
 <div id="pippo"></div><br/>
 
 <div id="pluto"></div><br/>
 
 <input type="button" value="crea select 1" onclick="popola_select('pippo','sel01',arr)">
 <input type="button" value="crea select 2" onclick="popola_select('pluto','sel02',arr2)">
 </form>
</body>
</html>

**delvento** · 30-01-2017, 16:41

Grazie un sacco, della soluzione al problema e anche per la scoperta del:

var html ='<select name="'+idSelect+'" id="'+idSelect+'" >';
non sapevo si potesse far scrivere in html ad una funzione javascript. Mi hai aperto un mondo davvero. Grazie mille.
Corro a studiarmi ciï¿½ che hai scritto e a far qualche modifica per applicare il tutto alla mia pagina!

**ciro78** · 31-01-2017, 11:44

ciao delvento,
benvenuto sul forum.
ti invito a leggere il regolamento in particolare la sezione che riguarda l'utilizzo del tag code.

Discussione: Popolare diverse select da un unico modello

Strumenti discussione

Ricerca discussione

Visualizza

Popolare diverse select da un unico modello

Permessi di invio