selezionare una select option per visualizzare il div nascosto e associato alla stessa select

[gianluis]

ciao a tutti,

forse il titolo non sintetizza al meglio il mio problema che coinvolge codice php e codice javascript. per cui, per completezza, spiego tutti i passaggi.


ho creato la tabella sondaggi nel mio database, la tabella � composta dai seguenti campi e righe:


id_sond - titolo - descrizione - risposta1 - risposta2 - mese - anno
1 - squadre - scegli squadra - milan - inter - gennaio - 2017
2 - giocatore - scegli giocatore - maldini - zanetti - febbraio - 2017


ho quindi creato una pagina php, nella quale devo richiamare due volte la stessa tabella sondaggi tramite due cicli while.
la devo richiamare due volte perch� voglio avere una select tramite la quale poter selezionare i vari sondaggi (ogni option sar� quindi una riga della mia tabella sondaggi) e voglio avere dei div nascosti (anche in questo caso, ogni div conterr� i dati prelevati da una riga della mia tabella sondaggi).


per il ciclo while php vedi qui: http://www.html.it/pag/16687/i-cicli-for-while-e-do/


nel mio esempio avr� quindi:


select
option 1 = sondaggio gennaio 2017
option 2 = sondaggio febbraio 2017


div nascosto sondaggio gennaio 2017
div nascosto sondaggio febbraio 2017


l'idea �: se seleziono l'option 1, viene mostrato solo il div contenente i dati del sondaggio gennaio 2017;
se seleziono l'option 2, viene mostrato solo il div contenente i dati del sondaggio febbraio 2017.


il codice php:

<?php




//estraggo i dati dal database con una query
$query_sondaggio="SELECT * from sondaggi";
$result_sondaggio= mysql_query($query_sondaggio);	


$dati_sondaggio1 = mysql_fetch_array($result_sondaggio)






//creo select con ciclo while per le option
//per rendere univoci gli attributi id e value aggiungo il campo id_sond estratto dalla tabella
echo'
<select id="sondaggio'.$dati_sondaggio1[id_sond].'" onchange="showDiv()">';




while ($dati_sondaggio2 = mysql_fetch_array($result_sondaggio))
{


echo '<option value="valore'.$dati_sondaggio2['id_sond'].'" id="attributo'.$dati_sondaggio2['id_sond'].'">'..'</option>';
}


echo'
</select>


<br><br>';






//creo div nascosti con ciclo while
//come prima, per rendere univoci gli attributi id e value aggiungo il campo id_sond estratto dalla tabella
while ($dati_sondaggio3 = mysql_fetch_array($result_sondaggio))
{


echo '<div id="contenuto'.$dati_sondaggio3['id_sond'].'" style="display:none">
sondaggio del '.$dati_sondaggio3['mese'].' - '.$dati_sondaggio3['anno'].'<br><br><br><br>


titolo: '.$dati_sondaggio3['titolo'].'<br><br>


descrizione: '.$dati_sondaggio3['descrizione'].'<br><br>


risposta: <br>


<input type="radio" name="risposta" value="risposta1">'.$dati_sondaggio3['risposta1'].'<br>
<input type="radio" name="risposta" value="risposta2">'.$dati_sondaggio3['risposta2'].'<br>
</div>';


}


?>

ora fin qui � tutto semplice. il problema � capire come scrivere correttamente il codice javascript per permettere di associare le option ai relativi div da mostrare.


ho provato a scrivere diverse volte il codice javascript, ma senza ottenere nulla di buono. Per esempio:

<script>


function showDiv(elem){
	
$("#sondaggio"+id).change(function() {	
   if( $('#attributo'+id).is(':selected')
      $("#contenuto"+id).attr("style", "display:block");
}


}


</script>

qualche aiuto o qualche spunto??

[KillerWorm]

Ciao, credo tu stia facendo un po' di confusione nella gestione degli eventi change.
Se utilizzi jQuery puoi escludere il richiamo della funzione con l'attributo onchange, che hai scritto in questa riga:

<select id="sondaggio'.$dati_sondaggio1[id_sond].'" onchange="showDiv()">

Puoi invece usare giusto il metodo jQuery change(), così come hai indicato dentro la funzione stessa, ma anche senza specificare una funzione showDiv. In tal caso, il callback del metodo change(), è già di suo la funzione che viene richiamata, appunto, al change dell'elemento select.

Ora, se hai più select da gestire, ti suggerisco di utilizzare una classe in modo da poterli "selezionare" attraverso un semplice selettore jQuery.

Nel tuo PHP avrai quindi una cosa del genere:

<select id="sondaggio'.$dati_sondaggio1[id_sond].'" class="showdivonchange">';

Per recuperare, con jQuery, l'id dell'elemento option selezionato, puoi fare in vari modi.
Basta una semplice ricerca https://www.google.it/?gws_rd=ssl#q=...uery+id+option

Chiaramente una volta recuperato l'id avrai una cosa tipo "attributoN", da cui dovrai recuperare quel valore N per poterlo combinare invece con il testo "contenuto", che formerà l'id del relativo div da visualizzare. Puoi usare una cosa come substr() o funzioni simili.

Il tuo jQuery potrebbe essere impostato in questo modo:

$(".showdivonchange").change(function() {
  var id = $(">:selected", this).attr("id").substr(9);
  $("#contenuto"+id).attr("style", "display:block");
});

Questo non fa altro che mostrare il relativo div.
Se devi però nascondere anche gli eventuali div aperti in precedenza, ti consiglio di usare una classe (anziché il css in linea) per la quale il div sarà visibile, quindi rimuoverla opportunamente dall'elemento a cui era stata applicata in precedenza, prima di riassegnarla al nuovo elemento.

[gianluis]

Ciao, credo tu stia facendo un po' di confusione nella gestione degli eventi change.
Se utilizzi jQuery puoi escludere il richiamo della funzione con l'attributo onchange, che hai scritto in questa riga:

<select id="sondaggio'.$dati_sondaggio1[id_sond].'" onchange="showDiv()">

Puoi invece usare giusto il metodo jQuery change(), cos� come hai indicato dentro la funzione stessa, ma anche senza specificare una funzione showDiv. In tal caso, il callback del metodo change(), � gi� di suo la funzione che viene richiamata, appunto, al change dell'elemento select.

Ora, se hai pi� select da gestire, ti suggerisco di utilizzare una classe in modo da poterli "selezionare" attraverso un semplice selettore jQuery.

Nel tuo PHP avrai quindi una cosa del genere:

<select id="sondaggio'.$dati_sondaggio1[id_sond].'" class="showdivonchange">';

Per recuperare, con jQuery, l'id dell'elemento option selezionato, puoi fare in vari modi.
Basta una semplice ricerca https://www.google.it/?gws_rd=ssl#q=...uery+id+option

Chiaramente una volta recuperato l'id avrai una cosa tipo "attributoN", da cui dovrai recuperare quel valore N per poterlo combinare invece con il testo "contenuto", che former� l'id del relativo div da visualizzare. Puoi usare una cosa come substr() o funzioni simili.

Il tuo jQuery potrebbe essere impostato in questo modo:

$(".showdivonchange").change(function() {
  var id = $(">:selected", this).attr("id").substr(9);
  $("#contenuto"+id).attr("style", "display:block");
});

Questo non fa altro che mostrare il relativo div.
Se devi per� nascondere anche gli eventuali div aperti in precedenza, ti consiglio di usare una classe (anzich� il css in linea) per la quale il div sar� visibile, quindi rimuoverla opportunamente dall'elemento a cui era stata applicata in precedenza, prima di riassegnarla al nuovo elemento.

ciao Killerworm
grazie per la risposta... lavorer� sul tuo script, grazie mille per l'aiuto!