Simuler cliquer sur l'élément select avec jQuery
j'utilise ce code pour simuler clickselect elément:
$(function(){
$("#click").click(function(){
$("#ts").click();
//$("#ts").trigger("click");
});
});
et le code HTML est:
<select id="ts">
<option value="1">1</option>
<option value="2">Lorem ipsum dolor s.</option>
<option value="3">3</option>
</select>
<input type="button" id="click" value="Click"/>
je test click et trigger mais les deux fonctionnent pas.
merci de votre aide.
6 réponses
eh Bien, vous ne pouvez pas attacher click événement html select mais vous pouvez faire cette chose délicate...
jetez un oeil ici:
DÉMONSTRATION en Direct:
C'est la meilleure méthode de cross browser que je pense que vous pouvez obtenir. Testé sur Safari, Firefox, Chrome et IE. (mise à jour: 10-13-2016)
$(function() {
$("#click").on('click', function() {
var $target = $("#ts");
var $clone = $target.clone().removeAttr('id');
$clone.val($target.val()).css({
overflow: "auto",
position: 'absolute',
'z-index': 999,
left: $target.offset().left,
top: $target.offset().top + $target.outerHeight(),
width: $target.outerWidth()
}).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() {
$target.val($clone.val());
}).on('click blur keypress',function(e) {
if(e.type !== "keypress" || e.which === 13)
$(this).remove();
});
$('body').append($clone);
$clone.focus();
});
});
Voir jsFiddle démo
C'est aussi proche que vous obtiendrez, je pense :
$(function(){
$("#click").on('click', function(){
var s = $("#ts").attr('size')==1?5:1
$("#ts").attr('size', s);
});
$("#ts option").on({
click: function() {
$("#ts").attr('size', 1);
},
mouseenter: function() {
$(this).css({background: '#498BFC', color: '#fff'});
},
mouseleave: function() {
$(this).css({background: '#fff', color: '#000'});
}
});
});
j'ai fini par mettre l'attribut sélectionné l'option elle-même. Puis déclencher le changement même sur l'élément select.
j'ai un complexe select élément, alimenté par la réponse donnée dans un précédent select élément. Les Options sont alimentées par AJAX, déclenchées par onchange événements.
pour mes besoins, pour pré-remplir les réponses avec un "événement magique caché" qui simule le comportement de l'utilisateur (d'une manière de test intensif) j'utilise le code jQuery suivant dans "mon événement magique". Il sélectionne l'option par son index:
// Quick feed of my Car Form
document.getElementById('carbrand').selectedIndex = 30; // "PORSCHE"
document.getElementById('carbrand').onchange();
var timeoutID = window.setTimeout(function () {
document.getElementById('model').selectedIndex = 1; // "911"
document.getElementById('model').onchange();
var timeoutID = window.setTimeout(function () {
document.getElementById('energy').selectedIndex = 1; // "SUPER"
document.getElementById('energy').onchange();
} , 200);
} , 200);
Merci à https://stackoverflow.com/users/1324/paul-roub pour les les corrections ;-)
petite mise à jour(avec http://jsfiddle.net/mike_s/y5GhB/