Événement clic sur l'option de sélection de l'élément dans le navigateur chrome

Je vais avoir un problème dans Chrome avec les éléments suivants:

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

items.each(function(){

    $(this).click(function(){

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

La click événement ne semble pas le feu dans Chrome, mais travaille en Firefox.

Je veux être en mesure de click sur un option élément d'une liste déroulante, si je faire à la place un autre type d'élément, disons <li> il fonctionne très bien. Des idées? Merci.

InformationsquelleAutor | 2009-09-09

80

Je ne crois pas que l'événement click est valable sur les options. Il est valide, cependant, sur certains éléments. Donner à ceci un essai:
```
$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});
```
- J'ai essayé d'écouter l'événement de clic sur options, puis il a travaillé: $(document).on("click",", sélectionnez l'option",function() {console.log("nice to meet you, la console ;-)"); });
- Même si l'événement click de travaux, l'événement change est beaucoup plus approprié (pensez à ce qui va se passer si l'utilisateur sélectionne une option à l'aide de son clavier)
- Cependant, quelle est la solution si vous aussi vous voulez mettre le feu à un événement si l'utilisateur clique sur l'option sélectionnée? Le changement ne fonctionne pas...
- Ok, c'est vrai. Bien que cela semble plutôt rares cas d'utilisation pour moi. Peut-être ajouter un commentaire à ce sujet à votre réponse? 🙂
- Événement fonctionne parfaitement sous firefox, j'ai travailler dans firefox, mais option, cliquez sur l'événement à ne pas fonctionne dans chrome
InformationsquelleAutor Samantha Branham

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

JS partie:

$("#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>

InformationsquelleAutor vivek sharma

10

La voie de la facilité de changement de la sélection et de la mise à jour c'est cette.
```
//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');
```
- Oui, cela fonctionne, mais vous devriez noter que dans le .val('value') la 'value' est une valeur de option value attribut. Exemple: <option value="3"> $('#select_element_selector').val('3').change();
InformationsquelleAutor DarckBlezzer
5

J'ai trouvé que la suite travaillé pour moi - au lieu d'utiliser sur cliquez sur modifier par exemple:
```
 jQuery('#element select').on('change',  (function() {

       //your code here

}));
```
InformationsquelleAutor Elina Lulle
5

J'ai eu simmilar question. change événement n'était pas bon pour moi parce que j'ai besoin de rafraîchir 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 c'est très laid, et vous devriez coller avec change cas où vous le pouvez, mais cela a résolu mon problème.
- ce est agréable, mais il ne fonctionne pas sous Mac Chrome. Le problème, quand fermer <select> clique sur <option> $(sélectionner).on('click') même n'est pas détecté
InformationsquelleAutor 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 {
    ...
    }
});

InformationsquelleAutor Artur Saidov

1

Peut-être l'une des nouvelles versions de jquery prend en charge l'événement de clic sur options. Il a travaillé pour moi:
```
$(document).on("click","select option",function() {
  console.log("nice to meet you, console ;-)");
});
```
Mise à JOUR: UN possible cas d'utilisation pourrait être le suivant: un utilisateur envoie Un formulaire html et les valeurs sont insérées dans une base de données. Cependant, l'une ou plusieurs des valeurs par défaut et vous marquer ce les inscriptions automatisées. Vous aussi vous montrer à l'utilisateur que son entrée est généré automatiquement, mais si il confirmer l'inscription en cliquant sur le déjà sélectionné l'option changer le drapeau dans la base de données. L'un des rares sue cas, mais possible...
- Juste une remarque, à l'aide de $(document) peuvent polluer l' document cliquez sur les événements, en particulier lorsque le débogage sur le Chrome dev Tools (par exemple). Je préfère (dans ce cas, par exemple) à utiliser $('select option') (en d'autres mots, d'attribuer l'événement directement à l'élément).
InformationsquelleAutor zuluk
1

À la recherche pour 2018.
Cliquez sur l'événement sur la balise d'option, à l'intérieur d'une balise select, n'est pas tiré sur Chrome.

De changement de l'utilisation de l'événement, et la capture de l'option sélectionnée:
```
$(document).delegate("select", "change", function() {
    //capture the option
    var $target = $("option:selected",$(this));
});
```
Être conscient que $cible peut être une collection d'objets si la balise select est multiple.
- My bad, je ne vois pas (je ne sais pas pourquoi) la réponse correcte sur le dessus
InformationsquelleAutor Adrián Suarez Bais

- Je utiliser une des deux partie de la solution

Partie 1 - Inscrivez-vous mon des événements de clic sur les options comme j'ai l'habitude d'
Partie 2 - Détecter que l'élément sélectionné changé, et appelez-le, cliquez sur
gestionnaire de la nouvelle élément sélectionné.

HTML

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

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

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

InformationsquelleAutor Aaron Sherman

0

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

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

puis déclencher le changement

$('#selectorForOption').changed()

Cette façon, tout le javascript qui est câblé à

InformationsquelleAutor pardahlman
0

Je sais que ce bout de code fonctionne pour la reconnaissance de l'option, cliquez sur (au moins en Chrome et FF). En outre, il fonctionne si l'élément n'était pas là sur les DOM de la charge. J'ai l'habitude d'utiliser, lorsque j'sections d'entrée des entrées dans un seul sélectionner l'élément et je ne veux pas le titre de la section pour être cliqué.
```
$(document).on('click', 'option[value="disableme"]', function(){
    $('option[value="disableme"]').prop("selected", false);
});
```
InformationsquelleAutor Gwi7d31
0

Depuis $(this) n'est pas correcte, plus avec ES6 flèche fonction qui n'ont pas la même this que function() {}, vous ne devriez pas utiliser $( this ) si vous utilisez ES6 syntaxe.

En outre, selon l'officiel de jQuery réponse, il y a un moyen plus simple de faire que ce que le haut de réponse dit.

La meilleure façon d'obtenir le code html d'une option 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 d'origine).

Ajoutez simplement de l'écouteur d'événement change, avec le jQuery méthode abrégée change(), pour déclencher votre code lorsque le choix de l'option de changement.
```
 $ ('#yourSelect' ).change(() => {
    process($('#yourSelect option:selected').html());
  });
```
Si vous voulez juste pour connaître la valeur de la option:selected (l'option que l'utilisateur a choisi), vous pouvez simplement utiliser $('#yourSelect').val()

InformationsquelleAutor Ilan Schemoul
0

Solution de contournement:

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

InformationsquelleAutor JeanP

Vous devez vous connecter pour publier un commentaire.