Changer l'option de <select> et déclencher des événements avec JavaScript

Question

Comment puis-je changer l'option d'un HTML avec JavaScript (sans aucune bibliothèque comme jQuery), tout en déclenchant les mêmes événements que si un utilisateur avait effectué le changement ? Par exemple, en utilisant le code suivant, si je change l'option avec ma souris, un événement se déclenche (c'est-à-dire que onchange est exécuté). Cependant, lorsque je change l'option avec JavaScript, aucun événement n'est déclenché. Est-il possible de déclencher les gestionnaires d'événements associés comme onclick, onchange, etc., lorsqu'une option est sélectionnée avec JavaScript ? Un Deux Trois

http://jsfiddle.net/xwywvd1a/

Answer 1

Malheureusement, vous devez déclencher l'événement change manuellement. Et utiliser le Constructeur d'événements sera la meilleure solution.

var select = document.querySelector('#sel'),
    input = document.querySelector('input[type="button"]');
select.addEventListener('change',function(){
    alert('changé');
});
input.addEventListener('click',function(){
    select.value = 2;
    select.dispatchEvent(new Event('change'));
});

  Un
  Deux
  Trois

Et, bien sûr, le constructeur Event n'est pas supporté dans IE. Vous pourriez donc avoir besoin de le polyfiller avec ceci :

function Event( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

Answer 2

Le fiddle de ma solution est ici. Mais au cas où il expire, je vais également coller le code.

HTML:

  Un
  Deux
  Trois

JS:

var sel = document.getElementById('sel'),
    button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;

    // déclencher l'événement correctement selon StackOverflow
    // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        sel.dispatchEvent(evt);
    }
    else {
        sel.fireEvent("onchange");
    }
});

sel.addEventListener('change', function (e) {
    alert('changé');
});

Answer 3

C'est aussi simple que cela:

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    sel.onchange();
});

Mais cette méthode pose un problème. Vous ne pouvez pas appeler des événements comme vous le feriez avec des fonctions normales, car il peut y avoir plus d'une fonction à l'écoute d'un événement, et elles peuvent être définies de différentes manières.

Malheureusement, la 'bonne façon' de déclencher un événement n'est pas si simple car vous devez le faire différemment dans Internet Explorer (en utilisant document.createEventObject) et Firefox (en utilisant document.createEvent("HTMLEvents"))

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    fireEvent(sel,'change');

});

function fireEvent(element,event){
    if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
    }
    else{
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    }
}

Answer 4

Toute la création et la diffusion d'événements fonctionnent, mais puisque vous utilisez l'attribut onchange, votre vie peut être un peu plus simple :

http://jsfiddle.net/xwywvd1a/3/

var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();

Si vous utilisez l'API d'événements du navigateur (addEventListener, AttachEvent d'IE, etc), alors vous devrez créer et diffuser des événements comme d'autres l'ont déjà souligné.

Answer 5

Essayer ceci :

 Un
  Deux 
  Trois 

  function changeOpt(){
  document.getElementById("sel").options[1].selected = true;

alert("changé")
  }