evento Click en la opción de selección de elementos en cromo

Question

estoy teniendo un problema en Chrome con lo siguiente:

var items = $("option", obj); 

items.each(function(){ 

    $(this).click(function(){ 

     // alert("test"); 
     process($(this).html()); 
     return false; 
    }); 
}); 

El evento click no parece disparar en Chrome, pero funciona en Firefox.

Quiero poder click en un elemento option de un combo, si lo hago en su lugar otro tipo de elemento, digamos <li> funciona bien. ¿Algunas ideas? Gracias.

Answer 1

No creo que el evento click sea válido en las opciones. Sin embargo, es válido en elementos seleccionados. Seguirlo:

$("select#yourSelect").change(function(){ 
    process($(this).children(":selected").html()); 
}); 

Answer 2

podemos lograr esta otra forma a pesar de llamar directamente evento con <select>.

JS parte: parte

$("#sort").change(function(){ 

    alert('Selected value: ' + $(this).val()); 
}); 

HTML:

<select id="sort"> 
    <option value="1">View All</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
    <option value="4">Last Modified</option> 
    <option value="5">Ranking</option> 
    <option value="6">Reviewed</option> 
</select> 

Answer 3

Lo que generalmente funciona para mí es cambiar primero el valor de la lista desplegable, por ejemplo,

$('#selectorForOption').attr('selected','selected')

y luego disparar el cambio

$('#selectorForOption').changed()

De esta manera, cualquier javascript que se conecta a

Answer 4

Tal vez una de las nuevas versiones de jQuery apoya el evento, haga clic en Opciones . Se trabajó para mí:

$(document).on("click","select option",function() { 
    console.log("nice to meet you, console ;-)"); 
}); 

ACTUALIZACIÓN: Un posible caso de uso podría ser la siguiente: Un usuario envía un formulario HTML y los valores se introducen en una base de datos. Sin embargo, uno o más valores están configurados por defecto y usted marca estas entradas automáticas. También le muestra al usuario que su entrada se genera automáticamente, pero si confirma la entrada haciendo clic en la opción ya seleccionada, cambia el indicador en la base de datos. Un caso raro demandar, pero posible ...

Answer 5

<select id="myselect"> 
    <option value="0">sometext</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
</select> 

$('#myselect').change(function() { 
    if($('#myselect option:selected').val() == 0) { 
    ... 
    } 
    else { 
    ... 
    } 
}); 

Answer 6

he encontrado que los siguientes trabajó para mí - en lugar de usar el clic, el uso en el cambio por ejemplo:

jQuery('#element select').on('change', (function() { 

     //your code here 

})); 

Answer 7

Sé que este fragmento de código funciona para reconocer un clic de opción (al menos en Chrome y FF). Además, funciona si el elemento no estaba allí en la carga DOM. Usualmente uso esto cuando ingreso secciones de entradas en un solo elemento de selección y no quiero que se haga clic en el título de la sección.

$(document).on('click', 'option[value="disableme"]', function(){ 
    $('option[value="disableme"]').prop("selected", false); 
}); 

Answer 8

He tenido un problema similar. change evento no fue bueno para mí porque he necesitado actualizar algunos datos cuando el usuario hace clic en option.Después de pocos ensayos que tengo esta solución:

$('select').on('click',function(ev){ 
    if(ev.offsetY < 0){ 
     //user click on option 
    }else{ 
     //dropdown is shown 
    } 
}); 

Estoy de acuerdo que esto es muy feo y debe seguir con change evento en el que se puede, pero esta resuelto mi problema.

Answer 9

Desde $(this) no es correcto más con ES6 función de flecha que no tienen el mismo tiene que thisfunction() {}, no se debe utilizar $ (este) si utiliza la sintaxis ES6.
Además de acuerdo con el oficial jQuery's anwser, hay una manera más simple de hacer eso que dice la respuesta principal.
La mejor manera de conseguir el HTML de una opción seleccionada es utilizar

$('#yourSelect option:selected').html(); 

Puede reemplazar html() por text() o cualquier otra cosa que desea (pero html() estaba en la pregunta original).
Simplemente agregue el detector de eventos change, con el método de taquigrafía de jQuery change(), para activar su código cuando cambie la opción seleccionada.

$ ('#yourSelect').change(() => { 
    process($('#yourSelect option:selected').html()); 
    }); 

Si lo que desea es conocer el valor de la option:selected (la opción de que el usuario haya elegido) sólo se puede utilizar $('#yourSelect').val()

Answer 10

La manera más fácil de cambiar la selección, y actualizarlo es esto.

// BY id 
$('#select_element_selector').val('value').change(); 

otro ejemplo:

//By tag 
$('[name=selectxD]').val('value').change(); 

otro ejemplo:

$("#select_element_selector").val('value').trigger('chosen:updated'); 

Answer 11

Solución:

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

Answer 12

Buscando esto en 2018. El evento Click en la etiqueta de opción, dentro de una etiqueta de selección, no se activa en Chrome.

Uso de eventos de cambio, y la captura de la opción seleccionada:

$(document).delegate("select", "change", function() { 
    //capture the option 
    var $target = $("option:selected",$(this)); 
}); 

Tenga en cuenta que $ diana puede ser una colección de objetos si la etiqueta de selección es múltiple.