select dinamica senza reload

**Gumble** · 22-09-2005, 11:32

ciao, come faccio a fare una select dinamica di questo tipo:

codice:

<select A>
<option value=1></option>
<option value=2></option>
<option value=3></option>
</select>

<select B> --> popolata facendo una query "where x = $opzioneSceltaInA"
<option value=""></option>
.....
</select>

senza dover reloadare la pagina?

**stabi** · 22-09-2005, 12:03

con php non fai, forse con java

**shadir** · 22-09-2005, 12:10

Lo puoi fare con javascript
All'apertura della pagina carichi i dati in un array e la select la costruisci dimanicamente utilizzando i dati nell'array.

**Gumble** · 22-09-2005, 13:34

non riesco a costruire l'array!

la query é questa:

$cmd = "SELECT * FROM db_version";

e la seconda select deve fare vedere tutte le versioni di un certo software (scelto con la prima select) --> db_sw_id

quindi dovrei costruire un array per ogni record del risultato della query:

"db_version_id" -> andrà poi come option value nella 2° select
"version_name" -> é il testo tra <option></option>
"db_sw_id" -> é l'id del software

come lo costruisco per poter poi usare questa funzione? (elementi é l'array che devo creare)

codice:

<script>
function populate(dove, valore) {
 var k=0;
 for (j=0; j<elementi.length; j++)
  if (elementi[j].indicatore==valore) {
   dove.options[k]=new Option(elementi[j].text, elementi[j].value);
   k++
  }
 dove.options.length=k;
}
</script>

**shadir** · 22-09-2005, 14:42

codice:

<script language="javascript">
Arr= new Array(); //la dichiarazione dell'array si deve trovare nel <title></title> della pagina html
</script>

//COSI COSTRUISCI L'ARRAY JAVASCRIPT 
$i=0;
$query = SELECT * FROM db_version;
$risultato=mysql_query($query);
			
$righe=mysql_num_rows($risultato);
if ($righe>0 )
{

$i=0;
while ($riga=mysql_fetch_array($risultato,MYSQL_ASSOC))
{
?>				
<script language="javascript">
indice = parseInt("<?=$i?>");
Arr[indice]=new Array ("<?=$riga["campo1"]?>","<?=$riga["campo2"])?>");
</script>
<?php				
$i++;
}
	
}
mysql_free_result($risultato);

Le seguenti funzioni le puoi invece uper svuotare e ricreare la select

codice:

/***************************************************************************/
/* FUNZIONI CHE AGGIUNGONO UN ELEMENTO  IN UNA SELECT						   */
/***************************************************************************/

 function AggiungiEl(In, Out)
{
	//prelevo elementi selezionati	
	 aSelect= document.getElementById(Out)
	 numElement = aSelect.length;
	for (j=numElement-1;j>=0;j--) 
	{
		if ( aSelect.options(j).selected &&  aSelect.options(j).value!="")
		{
			curOption = aSelect.options(j);
			NuovoElemento(In, curOption.value, curOption.text)
			aSelect.remove(j);

		}
	
	} 

}

function NuovoElemento(In, valore, testo)
	{
		var aSelect = document.getElementById(In);
		newOption = document.createElement("option");
		aSelect.add(newOption);
		newOption.value = valore;
		newOption.text  = testo;
	}

function svuota(In)
 {
	 //---------- Prima svuoto tutti valori tranne quello selezionato nella select selezionata
	 aSelect= document.getElementById(In)
	 //value      = aSelect.value;
	 numElement = aSelect.length;
	 value="Nan";
	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) 
		else
		{ aSelect.options(j).selected;}
		
	}
}

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

E' comunque possibile fare senza fare nè un refresh della pagina nè costruire dinamicamente una lista di array ( anche se secondo me è meglio fare cosi).
Il mio esempio usa un popup al quale viene passato il valore del select principale. il popup elabora una nuova seconda select e la rimanda alla pagina principale.

codice:

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

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
 function pippo(aValue) {
  a = window.open('test2198c.php?sel='+aValue,"Message","width=200,height=100");
 }
//-->
</script>

</head>
<body>
<select onchange="pippo(this.value)">
 <option value=".">Seleziona un valore</option>
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>  
</select>


<div id="myDiv">
<select name="sel2" id="sel2">
 <option>----------------------</option>
</select>
</div>



</body>
</html>

Nel file seguente uso degli array, ma con una query sql il concetto è identico.
file : test2198b.php

codice:

<?php 
$ok = false;
if (isset($_GET['sel'])) {
 $sel = $_GET['sel'];
 if ($sel == 'A') {
  $pippo = array("A1"=>"A1","A2"=>"A2","A3"=>"A3","A4"=>"A4");
	$ok = true;
 } // if ($sel == 'A')
 if ($sel == 'B') {
  $pippo = array("B1"=>"B1","B2"=>"B2","B3"=>"B3","B4"=>"B4");
	$ok = true;	
 } // if ($sel == 'B')
 if ($sel == 'C') {
  $pippo = array("C1"=>"C1","C2"=>"C2","C3"=>"C3","C4"=>"C4");
	$ok = true;	
 } //  if ($sel == 'C')  
} // if (isset($_GET['sel'])) ?>

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

<html>
<head>
<title>Untitled</title>

<script language="JavaScript" type="text/javascript">
<!--
function crea() {
 //--------- Select di destino
 destSel           = window.opener.document.getElementById('myDiv');
 destSel.innerHTML = document.getElementById('divResult').innerHTML;
} // function crea()
//-->
</script>

</head>
<body onload='crea()' ><? 
 //------------ In caso di successo 
 if ($ok) {?>
  <center> Attendere prego </center>
  <div id="divResult" style="display:none">
  <select id="sel2" name="sel2"><? 
	foreach($pippo as $key => $value) { ?>
	 <option value="<? print $key ?>"><? print $value ?></option><?
	} // foreach($pippo as $key => $value)  ?>
	</select>
	</div><? 
 } // if ($ok) 
 
 //------------ Altrimenti
 if (! $ok) { ?>
  <center> Attendere prego </center>
  <div id="divResult" style="display:none">
  <select id="sel2" name="sel2">  
	 <option value=".">----------------------</option> 
	</select>
	</div><?
 } // if ($ok) ?>
  <script language="JavaScript" type="text/javascript">
  <!--
   window.close();
  //-->
  </script>
</body>
</html>

Dimenticavo funziona con IE

**badaze** · 22-09-2005, 15:12

Per IE e FF

codice:

<?php 
$ok = false;
if (isset($_GET['sel'])) {
 $sel = $_GET['sel'];
 if ($sel == 'A') {
  $pippo = array("A1"=>"A1","A2"=>"A2","A3"=>"A3","A4"=>"A4");
	$ok = true;
 } // if ($sel == 'A')
 if ($sel == 'B') {
  $pippo = array("B1"=>"B1","B2"=>"B2","B3"=>"B3","B4"=>"B4");
	$ok = true;	
 } // if ($sel == 'B')
 if ($sel == 'C') {
  $pippo = array("C1"=>"C1","C2"=>"C2","C3"=>"C3","C4"=>"C4");
	$ok = true;	
 } //  if ($sel == 'C')  
} // if (isset($_GET['sel'])) ?>

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

<html>
<head>
<title>Untitled</title>

<script language="JavaScript" type="text/javascript">
<!--
function crea() {
 //--------- Select di destino
 destSel           = window.opener.document.getElementById('myDiv');
 destSel.innerHTML = document.getElementById('divResult').innerHTML;
} // function crea()
//-->
</script>

</head>
<body ><? 
 //------------ In caso di successo 
 if ($ok) {?>
  <center> Attendere prego </center>
  <div id="divResult" style="display:none">
  <select id="sel2" name="sel2"><? 
	foreach($pippo as $key => $value) { ?>
	 <option value="<? print $key ?>"><? print $value ?></option><?
	} // foreach($pippo as $key => $value)  ?>
	</select>
	</div><? 
 } // if ($ok) 
 
 //------------ Altrimenti
 if (! $ok) { ?>
  <center> Attendere prego </center>
  <div id="divResult" style="display:none">
  <select id="sel2" name="sel2">  
	 <option value=".">----------------------</option> 
	</select>
	</div><?
 } // if ($ok) ?>
  <script language="JavaScript" type="text/javascript">
  <!--
	crea();
  window.close();
  //-->
  </script>
</body>
</html>

**Gumble** · 22-09-2005, 15:29

ciao, grazie per le risposte.. in giro ho trovato un tutorial che tratta l'argomento.. ma non sono riuscito a ottenere il risultato desiderato.. questo é il codice:

Codice PHP:


<script language="JavaScript">

var arItems = new Array()

arItems = [

<?

$cmd = "SELECT db_sw_id, db_version_id, version FROM db_version";

$rs = mysql_query($cmd);

while($aItems = mysql_fetch_array($rs)){

    echo "[".$aItems['db_sw_id']."," .$aItems['db_version_id'].",'".$aItems['version']."']";

}

?>

]

</script>

<script>

function fillItems( intStart ) {

    var fTypes = document.form1.db_sw

    var fItems = document.form1.db_version

    var a = arItems

    var b, c, d, intItem, intType

    if ( intStart > 0 ) {

        for ( b = 0; b < a.length; b++ ) {

            if ( a[b][1] == intStart ) {

                intType = a[b][0];

            }

        }

        for ( c = 0; c < fTypes.length; c++ ) {

            if ( fTypes.options[ c ].value == intType ) {

                fTypes.selectedIndex = c;

            }

        }

    }

    if ( intType == null ) {

        intType = fTypes.options[ fTypes.selectedIndex ].value

    }

    fItems.options.length = 0;

        for ( d = 0; d < a.length; d++ ) {

            if ( a[d][0] == intType ) {

                fItems.options[ fItems.options.length ] = new Option( a[d][2], a[d][1] ); // no line-break here

            }

        if ( a[d][1] == intStart ) {

            fItems.selectedIndex = fItems.options.length - 1;

        }

    }

}

</script>

a questo punto basterebbe richiamare la funzione all'onchange..

Codice PHP:


<td>

<SELECT name="db_sw" id="db_sw" onChange="fillItems(0);">

<option value="">select a sw type...</option>

<?

$type_list = GetListing("db_sw", "db_sw_id, db_sw_name");

foreach($type_list as $k => $v ) {

    echo "<option value=\"$k\">$v</option>\n";

}

?>

</SELECT>

</td>

<td>

<SELECT name="db_version" id="db_version">

</SELECT>

ma non riesco a farlo funzionare.. qualcuno capisce il perché?
casomai il tutorial é qui:

http://www.devarticles.com/c/a/JavaS...s-Client-Side/

**Gumble** · 22-09-2005, 15:30

dimenticavo: getListing é una funzione che uso per generare la le option della select

**Gumble** · 22-09-2005, 15:37

scusate! forse é meglio che chiedo in script perché la parte php é veramente poca...

qualcuno mi chiude questo post?

Discussione: select dinamica senza reload

Strumenti discussione

Ricerca discussione

Visualizza

select dinamica senza reload

usa javascript

Permessi di invio