événement Cliquez sur l'option de sélection élément en chrome

Question

Je vais avoir un problème dans Chrome ce qui suit:

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

items.each(function(){ 

    $(this).click(function(){ 

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

L'événement click ne semble pas tirer dans Chrome, mais fonctionne en Firefox.

Je veux pouvoir click sur un option élément d'un combo, si je fais plutôt un autre type d'élément, disons <li> cela fonctionne très bien. Des idées? Merci.

Answer 1

Je ne crois pas que l'événement click soit valide sur les options. Il est cependant valide sur certains éléments. Donnez à ce essayer:

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

Answer 2

Nous pouvons atteindre cet autre manière en dépit de l'événement appelant directement avec <select>.

JS partie:

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

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

HTML partie:

<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

Ce qui fonctionne habituellement pour moi est d'abord changer la valeur de la liste déroulante, par exemple

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

puis déclencher le changement

$('#selectorForOption').changed()

De cette façon, tout javascript qui est câblé à

Answer 4

Peut-être l'une des nouvelles versions jquery prend en charge l'événement, cliquez sur les options . Il a travaillé pour moi:

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

MISE À JOUR: Un usecase possible pourrait être la suivante: Un utilisateur envoie un formulaire HTML et les valeurs sont insérées dans une base de données. Cependant, une ou plusieurs valeurs sont définies par défaut et vous marquez ces entrées automatisées. Vous montrez également à l'utilisateur que son entrée est générée automatiquement, mais s'il confirme l'entrée en cliquant sur l'option déjà sélectionnée, vous changez l'indicateur dans la base de données. Un cas rare de poursuivre en justice, mais possible ...

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

J'ai trouvé que ce qui suit a fonctionné pour moi - au lieu d'utiliser le clic, utilisez sur le changement par exemple:

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

     //your code here 

})); 

Answer 7

Je sais que cet extrait de code fonctionne pour reconnaître un clic d'option (au moins dans Chrome et FF). De plus, cela fonctionne si l'élément n'était pas présent sur la charge du DOM. J'utilise habituellement ceci quand j'insère des sections d'entrées dans un seul élément de sélection et je ne veux pas que le titre de section soit cliqué.

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

Answer 8

J'ai eu le problème simmilar. change événement n'était pas bon pour moi parce que j'ai besoin d'actualiser certaines données lorsque l'utilisateur clique sur option.Après quelques essais, j'ai cette solution:

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

Je suis d'accord que cela est très laid et vous devriez en tenir à l'événement change où vous pouvez, mais cela a résolu mon problème.

Answer 9

Depuis $(this) n'est plus correcte avec ES6 fonction de flèche qui n'ont pas la même this que function() {}, vous ne devriez pas utiliser $ (this) si vous utilisez la syntaxe ES6. En plus, selon le anwser officiel de jQuery, il existe une façon plus simple de faire ce que dit la première réponse.
La meilleure façon d'obtenir le code HTML d'une option choisie est d'utiliser

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

Vous pouvez remplacer html() par text() ou tout ce que vous voulez (mais html() était dans la question initiale).
Ajoutez simplement l'écouteur d'événement change, avec la méthode abrégée de jQuery change(), pour déclencher votre code lorsque l'option sélectionnée change.

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

Si vous voulez juste connaître la valeur de l'option:selected (l'option que l'utilisateur a choisi), vous pouvez simplement utiliser $('#yourSelect').val()

Answer 10

La façon facile de changer la sélection, et le mettre à jour est la suivante.

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

un autre exemple:

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

un autre exemple:

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

Answer 11

Solution:

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

Answer 12

sur la recherche de ce 2018. L'événement Click sur la balise d'option, à l'intérieur d'une balise select, n'est pas déclenché sur Chrome.

Utiliser l'événement de changement et saisir l'option sélectionnée:

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

Soyez conscient que $ cible peut être une collection d'objets si la balise select est multiple.