Select dinamici multipli

[newbobotime]

Ciao Raga,
Ho un problema (ovviamente !! )

Ho un form nel quale ho inserito 2 comandi select dinamici, dove ci sono come valori nel primo, delle categorie es.: CASE, VACANZE, SVAGO e nel secondo le relative sottocategorie, es.: cerco affitto, offro affitto, etc...... chiaramente i valori delle select vengono prelevati da 2 tabelle MySQL, una delle categorie e l'altra delle sottocategorie.

Chiaramente vorrei che selezionando il primo select facesse visualizzare nel secondo select solo le sottocategorie di appartenenza.

Spero di non essermi incasinato troppo con la spiegazione !!



10ks





.

[elysaweb]

secondo me devi usare qualche evento di javascript tipo onclick...

[killua85]

ho trovato questo esempio in javascript forse puo esserti utile http://javascript.html.it/demo/javas...27/esempio.htm

[newbobotime]

Grazie Raga,
In effetti ho dovuto utlizzare un Javascript, purtroppo non mi è possibile gestire dinamicamente i vari link, com'era mia intenzione, va bene cmq.


10KS





.

[ercolinox]

grazie,

ottimo esempio,
a me servirá certamente..

[grifis78]

Proprio in questo momento mi sono ritrovato con lo stesso problema ed ho trovato questo 3d...

Allora, dovrei creare un form dove selezionando una determinata categoria, in automatico (sempre nella stessa pagina) mi compare una sottocategoria specifica per la prima. Come si fa? Se la cosa è complessa, mi sapete indicare dove cercare fra le varie guide? Su quella per l'html non ho trovato niente e non conoscendo javascript l'esempio consigliato sopra non mi è d'aiuto.. grazie fin d'ora!

[telegio]

una roba del genere...
calcola che è già adattato, però testato e funzionante...
la form che deve contenere i campi si chiama myform... ovvio...

fai le query iniziali per prendere i dati poi:
<script language="JavaScript" type="text/javascript">
function ListSelectValues(CONTROL){
var strTemp = "";
for(var i = 0;i < CONTROL.length;i++)
{
                if(CONTROL.options[i].selected == true)
                                              {
                                                    strTemp += CONTROL.options[i].value+",";
                                              }
                                              else
                                              {
                                                   //strTemp += "0,";
                                                }
                              }
return strTemp;
}

function popola()

{
          document.myform.ComboFiglia.options.length = 0
         yyy=0
               
         for(var i=0;i<Arr_Descrizione.length;i++)
         {
           strconf=(''+Arr_Padre[i]+'');
        strconf2="-"+ListSelectValues(myform.ComboPadre).split(",")[0]+"-";

            if ( (ListSelectValues(myform.ComboPadre).indexOf(strconf)!=-1) || (strconf2=="--") )
            {
                myform.ComboFiglia.options.length ++;

                myform.ComboFiglia.options[yyy].value =""+Arr_Descrizione[i].split(",")[0]+"";
                myform.ComboFiglia.options[yyy].text = Arr_Descrizione[i].split(",")[1];
               yyy ++;
            }
      }
}

                                    
</script> 

poi

per l'array padre:

<select id="ComboPadre" name="ComboPadre" onChange="popola();">
       <?php
do {  
?><option value="<?php echo $row_RecPadre['campo1']?>"><?php echo $row_RecPadre['campo1']?></option>
        <?php
} while ($row_RecPadre = mysql_fetch_assoc($RecPadre));
  $rows = mysql_num_rows($RecPadre);
  if($rows > 0) {
      mysql_data_seek($RecPadre, 0);
      $row_RecPadre = mysql_fetch_assoc($RecPadre);
  }
?></select>         
<!--
                         Questi array JS memorizzano il primo la descrizione (identica a quella della select figlia)
                        e il secondo la chiave corrispondente al Padre. Penso che non sia la cosa più comoda del mondo ma funziona.
                        Usando forse un'array di classi apposite si può fare un lavoro migliore, più pulito.
                        Vanno dimensionati con il numero di record della combo figlia... in asp per esempio scriverei:
                        
                                   var Arr_Descrizione= new Array(<%=rsFiglio.recordcount%>);                                       
                                    var Arr_Padre= new Array(<%=rsFiglio.recordcount%>);
                        
                        dove rsFiglio è il recordset "figlio" (quello che popola la combo Figlio) e recordcount è
                        il metodo che restituisce il numero di record.            
   

-->                </td>
    <td width="250" align="left"><script language="JavaScript" type="text/javascript">
                                   var Arr_Descrizione= new Array(4);                                       
                                    var Arr_Padre= new Array(4);
                  </script>

                <select name="ComboFiglia">
<!-- Nota BENE: Per ogni record
       ci sarà un ciclo che popola prendendo il record dal db, okkay?
      
-->

poi l'array figlio:

<select name="ComboFiglia">

<?php
do {  
?>
                        <option value="<?php echo $row_RecFiglio['id']; ?>"><?php echo $row_RecFiglio['campo2']; ?>

                        <script language="JavaScript" type="text/javascript">
                           Arr_Descrizione[<?php echo $row_RecFiglio['id']; ?>]="<?php echo $row_RecFiglio['id']; ?>,<?php echo $row_RecFiglio['campo2']; ?>"; //formato: value,text
                                        Arr_Padre[<?php echo $row_RecFiglio['id']; ?>]="<?php echo $row_RecFiglio['id_combo']; ?>"; //il "padre". Gli ho detto che figlio1 fa parte del padre "1" ;)
                                    </script>


<?php
} while ($row_RecFiglio = mysql_fetch_assoc($RecFiglio));
  $rows = mysql_num_rows($RecFiglio);
  if($rows > 0) {
      mysql_data_seek($RecFiglio, 0);
      $row_RecFiglio = mysql_fetch_assoc($RecFiglio);
  }
?>

[grifis78]

Ok, non sapendo in pratica una mazza di javascript, per il momento mi limito a scopiazzare...

Il codice presentato è il seguente:

<script type="text/javascript">
/*
Script tratto dal libro "JavaScript and DHTML Cookbook" - Capitolo 8-13
Pubblicato da O'Reilly & Associates
Copyright 2003 Danny Goodman
Riprodurre questa nota per qualunque riutilizzo del codice.
*/
var regiondb = new Object()
regiondb["africa"] = [{value:"102", text:"Cairo"},
{value:"88", text:"Lagos"},
{value:"80", text:"Nairobi"},
{value:"55", text:"Pretoria"}];
regiondb["asia"] = [{value:"30", text:"Ankara"},
{value:"21", text:"Bangkok"},
{value:"49", text:"Pechino"},
{value:"76", text:"New Delhi"},
{value:"14", text:"Tokyo"}];
regiondb["australia"] = [{value:"64", text:"Suva"},
{value:"12", text:"Sydney"}];
regiondb["europa"] = [{value:"11", text:"Atene"},
{value:"35", text:"Francoforte"},
{value:"3", text:"Londra"},
{value:"15", text:"Madrid"},
{value:"1", text:"Parigi"},
{value:"10", text:"Roma"},
{value:"6", text:"Stoccolma"},
{value:"97", text:"San Pietroburgo"}];
regiondb["noamer"] = [{value:"73", text:"Dallas"},
{value:"71", text:"Los Angeles"},
{value:"5", text:"New York"},
{value:"37", text:"Toronto"}];
regiondb["suamer"] = [{value:"65", text:"Buenos Aires"},
{value:"31", text:"Caracas"},
{value:"66", text:"Rio di Janeiro"}];

function setCities(chooser) {
var newElem;
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
var cityChooser = chooser.form.elements["città"];
while (cityChooser.options.length) {
cityChooser.remove(0);
}
var choice = chooser.options[chooser.selectedIndex].value;
var db = regiondb[choice];
newElem = document.createElement("option");
newElem.text = "Seleziona una città:";
newElem.value = "";
cityChooser.add(newElem, where);
if (choice != "") {
for (var i = 0; i < db.length; i++) {
newElem = document.createElement("option");
newElem.text = db[i].text;
newElem.value = db[i].value;
cityChooser.add(newElem, where);
}
}
}

</script>

</head>
<body >



<div align="center">


<h1>Esempio - Select dinamiche</h1>
<hr>
<form name="form" action="prova.php" method="post">
Invia la richiesta a:
<select name="continente" onchange="setCities(this)">
<option value="" selected="selected">Seleziona un continente:</option>
<option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia/Oceania</option>
<option value="europa">Europa</option>
<option value="noamer">Nord America</option>
<option value="suamer">Sud America</option>
</select>
<select name="città">
<option value="" selected="selected">Seleziona una città:</option>
</select> <input type="submit" value="Invia">
</form>

Ho creato una paginetta semplice semplice in php per capire cosa manda la pagina all'array $_POST. Sotto $_POST['continente'] ci va proprio il continente, ma sotto $_POST['città'] ci va un numero che corrispode al valore assegnato nello script. Come faccio a fargli entrare proprio il nome della città?


EDIT: scusa telegio, hai postato poco prima di me quindi non avevo visto! Adesso do un occhio a quello che mi hai suggerito, grazie!

[telegio]

figurati...
per completezza:
io quello script lo utilizzo in un gestionale per un sito di fotografi dove nella combopadre ci carico i fotografi mentre in quella figlia ci carico le gallerie che ciascun fotografo ha e che sono dinamiche pure quelle ovviamente...
vedi un po' te...

[telegio]

ma.. alla fine sei riuscito a fare quello che dovevi??