text list dinamiche

**agenti** · 17-09-2005, 23:46

Ciao a tutti...
volevo sapere se è possibile trovare qualche esempio di script con le seguenti funzionalità:

2 text list
che tramite due tasti (destra sinistra) si riempiono o cancellano avvicendevolmente passando i valori da uan text list ad un altra.

Spero di essere stato chiaro

**badaze** · 18-09-2005, 00:07

Cosi ?

codice:

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

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function sposta(sel1,sel2) {
 if (sel1.selectedIndex < 0) {
  return;
 } // if (sel1.selectedIndex < 0)
 //-------- Ricavo la riga selezionata
 var oCurOption    = sel1.options.item(sel1.selectedIndex);
 //-------- 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.innerText = oCurOption.innerText ;	
 //-------- Elimino la riga spostata
 elimina(sel1);
} // function sposta(sel1,sel2)

function elimina(unSelect) {
 if (unSelect.selectedIndex < 0) {
  return;
 } // if (unSelect.selectedIndex < 0)
 unSelect.options.remove(unSelect.selectedIndex)
} // function elimina(unSelect)
//-->
</script>

</head>
<body>
<select id="s1" size="5" >
<option value="1">10000</option>
<option value="2">20000</option>
<option value="3">30000</option>
<option value="4">40000</option>
<option value="5">50000</option>
<option value="6">60000</option>
<option value="7">70000</option>
<option value="8">80000</option>
<option value="9">90000</option>
</select>
<input type="button" value=">" onclick="sposta(document.getElementById('s1'),document.getElementById('s2'))">
<input type="button" value="<" onclick="sposta(document.getElementById('s2'),document.getElementById('s1'))">

<select id="s2" size="5" >
</select>
<input type="button" value="-" onclick="elimina(document.getElementById('s2'))">

</body>
</html>

**agenti** · 18-09-2005, 14:50

si,
esattamento quello che cercavo

**agenti** · 18-09-2005, 15:05

c'è un però:

ho analizzato il codice html riempiendo la lista di destra e risulta vuoto.

in questo modo se utilizzassi un form non passerebbero i parametri o sbaglio ?

**badaze** · 18-09-2005, 15:11

Originariamente inviato da agenti
c'è un però:

ho analizzato il codice html riempiendo la lista di destra e risulta vuoto.

in questo modo se utilizzassi un form non passerebbero i parametri o sbaglio ?

Ovviamente i dati stanno in memoria. Cosa vuoi fare di preciso e quale linguaggio lato server usi.

**agenti** · 18-09-2005, 16:38

uso asp,
ma ho anche visto che se seleziono un item il valore relativo passa.
E l'html si popola con le opzioni selezionate.

**agenti** · 21-09-2005, 15:27

richiedo aiuto per questo post...
dovrei solo riuscire a passare i parametri spostati da sel1 a sel2.

i parametri che devo inviare saranno quelli all'internod i sel2.

Purtroppo in questo modo i parametri stanno in memoria.

C'è un metodo per farli diventare fissi e poterli inviare?

Grazie.

**badaze** · 21-09-2005, 16:49

C'è questo metodo (forse esistono altri più semplici)
Mi hai detto che usi ASP. Spiacente non lo conosco. Comunque l'esempio qui sotto funziona con PHP ma non penso ci siano problemi.
Basta sapere che il file test2195b.php stampa a video il contenuto delle variabili di post.

codice:

Array ( [s] => Array ( [0] => 1 [1] => 3 [2] => 5 ) )

In questo esempio ho selezionato 10000, 30000 e 50000, i cui relativi valori sono 1, 3 e 5 ( vedere select la cui id è "s1" ).

Nella funzione preSub(aForm) creo per ogni opzione di 's2' un elemento "hidden" che assegno al form. Questi elementi hanno la forma di un elemento di un array (s[0] per il primo elemento, s[1] per il secondo, etc... ) e vengono trasmessi alla pagina test2195b.php tramite il metodo "post".

codice:

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

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function sposta(sel1,sel2) {
 if (sel1.selectedIndex < 0) {
  return;
 } // if (sel1.selectedIndex < 0)
 //-------- Ricavo la riga selezionata
 var oCurOption    = sel1.options.item(sel1.selectedIndex);
 //-------- 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 ;	
 //-------- Elimino la riga spostata
 elimina(sel1);
} // function sposta(sel1,sel2)

function elimina(unSelect) {
 if (unSelect.selectedIndex < 0) {
  return;
 } // if (unSelect.selectedIndex < 0)
 unSelect.options.remove(unSelect.selectedIndex)
} // function elimina(unSelect)

function preSub(aForm) {
 indice  = 0;
 oSelect = document.getElementById('s2');
 nbElem  = oSelect.length;
 for (i=0;i<nbElem;i++) {
  curOption       = oSelect.options.item(i);
  var hiddenVar   = document.createElement('INPUT');
	hiddenVar.name  = 's['+indice+']';
	hiddenVar.type  = 'hidden';
	hiddenVar.value = curOption.value;
  aForm.appendChild(hiddenVar);
	indice++;
 } // for (i=0;i<nbElem;i++)
 return true;
} // function preSub()
//-->
</script>

</head>
<body>
<form name="myform" action="test2195b.php" method="post" onsubmit="return preSub(this)">

<select id="s1" size="5" >
<option value="1">10000</option>
<option value="2">20000</option>
<option value="3">30000</option>
<option value="4">40000</option>
<option value="5">50000</option>
<option value="6">60000</option>
<option value="7">70000</option>
<option value="8">80000</option>
<option value="9">90000</option>
</select>

<input type="button" value=">" onclick="sposta(document.getElementById('s1'),document.getElementById('s2'))">
<input type="button" value="<" onclick="sposta(document.getElementById('s2'),document.getElementById('s1'))">

<select id="s2" name="s2" size="5" multiple="true" >
</select>
<input type="button" value="-" onclick="elimina(document.getElementById('s2'))">


<input type="submit" value="Submit">
</form>

</body>
</html>

File : test2195b.php

codice:

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

<html>
<head>
<title>Untitled</title>
</head>
<body>
<?php 
print_r ($_POST);
?>
</body>
</html>

**agenti** · 21-09-2005, 18:56

si grazie ora lo provo.

Ma non sarebbe più semplice rendere le "OPTION" "selected" una volta portate nel secondo form?

**badaze** · 21-09-2005, 18:59

Originariamente inviato da agenti
si grazie ora lo provo.

Ma non sarebbe più semplice rendere le "OPTION" "selected" una volta portate nel secondo form?

Ho provato anche con una selezione multipla e mi prendeva solo l'ultimo valore !!!!

Come ho scritto c'è forse una soluzione migliore !!!

Discussione: text list dinamiche

Strumenti discussione

Ricerca discussione

Visualizza

text list dinamiche

Permessi di invio