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.
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());
});
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>
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
}));
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');
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.
<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 {
...
}
});
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 ...
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()
J'utilise une solution en deux parties
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();
});
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);
});
Solution de contournement:
$('#select_id').on('change', (function() {
$(this).children(':selected').trigger('click');
}));
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é à
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.