web-dev-qa-db-fra.com

Cliquez sur l'événement sur l'élément d'option select en chrome

J'ai un problème dans Chrome avec 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 se déclencher dans Chrome, mais fonctionne dans Firefox.

Je veux être capable de click sur un élément option à partir d'un combo, si je fais plutôt un autre type d'élément, disons que <li> ça fonctionne bien. Des idées? Merci.

jquerygoogle-chromeselect
52
Victor

Je ne crois pas que l'événement click est valide pour les options. Il est cependant valide sur certains éléments. Essayez ceci:

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

Nous pouvons atteindre cet autre chemin malgré un événement appelant directement avec <select>.

JS part: 

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

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

Partie 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>
20
vivek sharma

J'ai trouvé que ce qui suit fonctionnait pour moi - au lieu d'utiliser un clic, utilisez le changement, par exemple 

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

       //your code here

}));
5
Elina Lulle

Le moyen facile de changer de sélection et de 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');
4
DarckBlezzer

J'ai eu un problème similaire. L'événement change n'était pas bon pour moi, car je devais 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 conviens que c’est très moche et que vous devriez vous en tenir à l’événement change où vous le pouvez, mais cela a résolu mon problème.

3
Halon
<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 {
    ...
    }
});
3
Artur

Peut-être que l'une des nouvelles versions de jquery prend en charge l'événement click on. Cela a fonctionné pour moi:

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

UPDATE: Un cas d'utilisation possible pourrait être le suivant: 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 signalez 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 modifiez l'indicateur dans la base de données. Un cas rare rare, mais possible ...

1
zuluk

Puisque $(this) n'est plus correct avec la fonction de flèche ES6 qui n'a pas le même this que function() {}, vous ne devriez pas utiliser $ (this) si vous utilisez la syntaxe ES6.
En plus, selon anwser de jQuery, il existe un moyen plus simple de faire ce que dit la réponse principale.
Le meilleur moyen d’obtenir le code HTML d’une option sélectionnée est d’utiliser 

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

Vous pouvez remplacer html() par text() ou tout autre élément de votre choix (mais html() était dans la question initiale).
Ajoutez simplement l’écouteur d’événements change, avec la méthode abrégée jQuery change(), pour déclencher votre code lorsque l’option sélectionnée sera modifiée.

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

Si vous voulez juste connaître la valeur du option:selected (l'option choisie par l'utilisateur), vous pouvez simplement utiliser $('#yourSelect').val()

0
Ilan Schemoul

J'utilise une solution en deux parties

  • Partie 1 - Inscrire mes événements de clic sur les options comme d'habitude
  • Partie 2 - Détecter que l'élément sélectionné a changé et appeler le gestionnaire de clic Du nouvel élément sélectionné.

HTML

<select id="sneaky-select">
  <option id="select-item-1">Hello</option>
  <option id="select-item-2">World</option>
</select>

JS

$("#select-item-1").click(function () { alert('hello') });
$("#select-item-2").click(function () { alert('world') });

$("#sneaky-select").change(function ()
{
   $("#sneaky-select option:selected").click();
});
0
Aaron Sherman

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 lors du chargement DOM. J'utilise généralement ceci lorsque je saisis des sections d'entrées dans un seul élément sélectionné et que je ne souhaite pas que le titre de la section soit cliqué.

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

Solution de contournement:

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

0
JeanP

Ce qui fonctionne généralement pour moi est d’abord de 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 connecté à

0
pardahlman

Vous recherchez ceci sur 2018 . L'événement de clic sur une balise d'option, dans une balise de sélection, n'est pas déclenché sur Chrome.

Utilisez l'événement de changement et capturez l'option sélectionnée:

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

Sachez que $ target peut être une collection d’objets si la balise select est multiple.

0
Adrián Suarez Bais