2011-04-21 15 views
45

dado:jQuery seleccione la opción controlador de clic

<select id="mySelect"> 
    <option>..</option> 
    ... 
</select> 

Utilizando el SELECT ID, ¿cómo puedo desencadenar un evento de clic en una de las opciones? Traté de adjuntar el evento directamente a la selección, pero esto desencadena un evento cada vez que se hace clic en la selección (incluso si no hay opciones). Ah, y es una selección múltiple (aunque no creo que eso importe).

+0

buena respuesta aquí cuando se necesita el valor antes de que el evento de cambio de http://stackoverflow.com/questions/4076770/getting-value-of-select -dropdown-before-change – malkoty

Respuesta

58

Desea el controlador de eventos 'cambiar', en lugar de 'hacer clic'.

$('#mySelect').change(function(){ 
    var value = $(this).val(); 
}); 
+15

¿y si eligen la misma opción? el evento de cambio no se desencadena – haz0rd

+0

@ haz0rd, solo podrá detectarlo con el evento click, del cual obtendrá 2. 1 cuando haga clic en la selección, y 1 cuando seleccione la opción ya seleccionada – Matt

+11

Tenga en cuenta ' los "eventos" de click * no * se * generan actualmente en Chrome para los elementos '

-2

Lo que he hecho en esta situación es que puse en los elementos de opción OnClick evento como este:

<option onClick="something();">Option Name</option> 

A continuación, sólo crear una función de script como el siguiente:

function something(){ 
    alert("Hello"); 
    } 

ACTUALIZACIÓN: Lamentablemente no puedo comentar, así que estoy actualizando aquí
TrueBlueAussie parecer jsFiddle está teniendo algunos problemas, comprobar aquí si funciona o no: http://js.do/code/klm

+1

Esto no * actualmente * funciona con Chrome, por lo que debe evitarse: http://jsfiddle.net/TrueBlueAussie/jd3bamtr/1/ –

+0

TrueBlueAussie, jsfiddle está teniendo problemas, consulte aquí: http://js.do/code/ klm –

+0

ps su código carece del código javascript así que ....la próxima vez al menos asegúrate de tener todo implementado para las sugerencias de alguien y revisado a través del depurador "Chromes" que no funciona y por qué !! antes de avisar a otros usuarios !! que no funciona y downvoting;) –

0

puede adjuntar un evento de foco para seleccionar

$('#select_id').focus(function() { 
    console.log('Handler for .focus() called.'); 
}); 
+0

Usando cromo. No creo que esto funcione ... –

-2

Una posible solución es añadir una clase para cada opción

<select name="export_type" id="export_type"> 
    <option class="export_option" value="pdf">PDF</option> 
    <option class="export_option" value="xlsx">Excel</option> 
    <option class="export_option" value="docx">DocX</option> 
</select> 

y luego utilizar el controlador de clic para esta clase

$(document).ready(function() { 

    $(".export_option").click(function (e) { 
     //alert('click'); 
    }); 

}); 

ACTUALIZACIÓN: Parece que el código funciona en FF, IE y Opera pero no en Chrome. Mirando las especificaciones http://www.w3.org/TR/html401/interact/forms.html#h-17.6 Diría que es un error en Chrome.

+0

@TrueBlueAussie acaba de probar su violín en FF e IE y funciona como se esperaba – VladL

+0

@ TrueBlueAussie e incluso en el viejo y buen Opera 12 ¡funciona! – VladL

+0

@TrueBlueAussie Entiendo, lo has probado solo en Chrome y lo probé en cualquier lugar además de Chrome. De lo contrario, debe escribir "no funciona en crome" en lugar de "los eventos de clic se comen con el menú desplegable", que obviamente es incorrecto. Ver mi actualización – VladL

24

$('#mySelect').on('change', function() { 
 
    var value = $(this).val(); 
 
    alert(value); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<select id="mySelect"> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
    <option value='4'>4</option> 
 
    <option value='5'>5</option> 
 
    <option value='6'>6</option> 
 
    <option value='7'>7</option> 
 
    <option value='8'>8</option> 
 
</select>


EXAMPLE

+0

var value = this.value también funciona perfectamente para esto. No es necesario ajustar el selector de jquery –

Cuestiones relacionadas