jquery, le select option in table td, rilevo solo la prima....

**marcopa** · 13-01-2016, 22:50

Ciao Ragazzi, sono alle prese con un problema che non riesco a capire, ho una table che viene incrementata da un db, i suoi valori vengono letti e inseriti in table td, normale!
uno di questi ha una select che puo' avere piu' valori, ma io rilevo solo la prima riga!
Posto un po di codice che per facilitare la lettura ho riscritto in html invece di php, dovevo capire ed ho semplificato il tutto, ma il problema mi rimane, non riesco proprio a capirne la causa.

codice HTML:

<script src="../include/2.1.1/jquery-2.1.1.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script>   
$(document).ready(function(){                
     $(".cambio").click(function(){                    
         var id= $("#cambio option:selected").val();                    
           alert(id);        // metto un alert per vedere il valore ma ho sempre la prima riga!!   
       });     
});
</script>   

<body>
<table name="tabella"> 
<thead>
<tr role="row">
<th style="width: 60px;">Status</th>
<th style="width: 260px;">Tecnologia </th>
<th style="width: 290px;">Matricola</th>
</tr>
</thead>

<tr>
<td>
          <select class="cambio" id="cambio">
                <option id="1" value="1">1</option>
                <option id="2" value="2">2</option>
                <option id="3" value="3">3</option>        
                <option id="4" value="4">4</option>              
                <option id="5" value="5">5</option>         
          </select>   
</td>         
   <td>tecnologia 2</td> 
   <td>matricola  2</td>
</tr>
<tr>
<td>  
          <select class="cambio" id="cambio">  
             <option id="A" value="1">A</option>                           
             <option id="B" value="2">B</option>
             <option id="C" value="3">C</option>
             <option id="D" value="4">D</option>
             <option id="E" value="5">E</option> 
           </select>  
</td>
</tr>          
</table> 
</body></html>

Qui ho messo per facilitarmi il compito, solo due record, in pratica questo esempio e' in realtà
decuplicato per tutti i record che vengono estratti, ma se non capisco con due figuriamoci con gli
altri....
Potete darmi una mano?
grazie.

**marcopa** · 13-01-2016, 23:32

AVREI una soluzione, ma e' jscript non jquery, vorrei gestirla in jquery per poter aggiornare il db con una chiamata ajax, qualcuno saprebbe convertirla in jquery?
questa e' la modifica in jscript

codice:

<tr>
		 		        <td>
                        <select class="cambio" id="alfa" onchange="javascript: Visualizza(this.options[this.selectedIndex].value)"> 
                        	<option id="1" value="1">1</option>
                        	<option id="2" value="2">2</option>
                        	<option id="3" value="3">3</option>
                        	<option id="4" value="4">4</option>
                        	<option id="5" value="5">5</option>
                        </select>
                        </td>
					    <td>tecnologia 2</td>
					    <td>matricola  2</td>
					  </tr>
					<tr>
		 		        <td>
                        <select class="cambio" id="beta" onchange="javascript: Visualizza(this.options[this.selectedIndex].value)">  
                        	<option id="A" value="A">A</option>
                        	<option id="B" value="B">B</option>
                        	<option id="C" value="C">C</option>
                        	<option id="D" value="D">D</option>
                        	<option id="E" value="E">E</option>
                        </select>
                        </td>
					    <td>tecnologia  3</td>
					    <td>matricola 3</td>
					  </tr>
					<tr>
		 		        <td>
                        <select class="cambio" id="gamma" onchange="javascript: Visualizza(this.options[this.selectedIndex].value)">  
                        	<option id="10" value="10">10</option>
                        	<option id="20" value="20">20</option>
                        	<option id="30" value="30">30</option>
                        	<option id="40" value="40">40</option>
                        	<option id="50" value="50">50</option>
                        </select>
                        </td>
					    <td>tecnologia </td>
					    <td>matricola </td>
					  </tr>

questa e' la parte jscript

codice:

<script language="javascript">
function Visualizza(valore)
{
    alert(valore)
}
</script>

**KillerWorm** · 14-01-2016, 00:16

Ciao, stai facendo un errore grossolano (sul primo post) che prescinde da JavaScript/jQuery. Gli id sono e devono essere sempre univoci, non è consentito assegnare lo stesso nome id a più elementi del DOM nella stessa pagina. Si tratta di nozioni base di HTML/CSS.
Magari può esserti utile dare uno sguardo a qualche guida di base, ad esempio qui http://www.html.it/pag/14217/id-e-cl...tori-speciali/

Inoltre:

Per definire una funzione che sia eseguita alla selezione di una voce sui diversi elementi select è preferibile usare il metodo change (riferito al gestore di evento onchange) piuttosto che click.

Dentro la funzione puoi usare l'identificatore this per fare riferimento all'elemento corrente su cui si sta operando.

Per recuperare il valore selezionato su un elemento select è sufficiente leggere la proprietà value riferita allo stesso elemento select, piuttosto che all'elemento option selezionato. Puoi usare this.value che è semplice JavaScript piuttosto che applicare un selettore jQuery e passare per il metodo val() (in questo caso il procedimento di elaborazione si allungherebbe inutilmente).

Nel caso ti serva recuperare altri attributi propri dell'elemento option selezionato, allora puoi impostare il selettore jQuery specificando this come secondo parametro, il quale ne indica il contesto su cui agisce il selettore.

Un esempio:

codice:

$(".cambio").change(function(){
  var val = this.value;
  var txt = $('option:selected', this).text();
  var id = $('option:selected', this).attr('id');
  
  console.log('val:'+val, 'txt:'+txt, 'id:'+id);
});

**KillerWorm** · 14-01-2016, 00:24

vorrei gestirla in jquery per poter aggiornare il db con una chiamata ajax, qualcuno saprebbe convertirla in jquery?

Giusto per chiarire, tieni presente che jQuery è sempre JavaScript, non è che stiamo parlando di linguaggi differenti.
Sia quindi chiaro che nessuno ti vieta di utilizzare funzioni e script in "puro JavaScript" (diciamo così) all'interno di altre funzioni jQuery, comprese le chiamate AJAX.

**marcopa** · 14-01-2016, 10:11

Originariamente inviata da KillerWorm

Ciao, stai facendo un errore grossolano (sul primo post) che prescinde da JavaScript/jQuery. Gli id sono e devono essere sempre univoci, non è consentito assegnare lo stesso nome id a più elementi del DOM nella stessa pagina. Si tratta di nozioni base di HTML/CSS.
Magari può esserti utile dare uno sguardo a qualche guida di base, ad esempio qui http://www.html.it/pag/14217/id-e-cl...tori-speciali/

Grazie Killer! cercavo una guida ma non avevo idea di COSA cercare!!

Discussione: jquery, le select option in table td, rilevo solo la prima....

Strumenti discussione

Ricerca discussione

Visualizza

jquery, le select option in table td, rilevo solo la prima....

Permessi di invio