Change ‘s option and trigger events with JavaScript

by

Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution.

var select = document.querySelector('#sel'),
    input = document.querySelector('input[type="button"]');
select.addEventListener('change',function(){
    alert('changed');
});
input.addEventListener('click',function(){
    select.value = 2;
    select.dispatchEvent(new Event('change'));
});
<select id="sel" onchange="alert("changed")">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
</select>
<input type="button" value="Change option to 2" />

And, of course, the Event constructor is not supported in IE. So you may need to polyfill with this:

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;
}

More Related Contents:

  1. How to make JavaScript execute after page load?
  2. Is there an onSelect event or equivalent for HTML ?
  3. Adding an onclick event to a table row
  4. Pass mouse events through absolutely-positioned element
  5. HTML DOM: Which events do not bubble?
  6. Replacement for deprecated `keypress` DOM event
  7. Is there a spec that the id of elements should be made global variable?
  8. onKeyPress Vs. onKeyUp and onKeyDown
  9. Check if an element contains a class in JavaScript?
  10. Chrome extension – retrieving global variable from webpage
  11. Document.write clears page
  12. innerText vs innerHTML vs label vs text vs textContent vs outerText
  13. How can I capture the right-click event in JavaScript? [duplicate]
  14. Why is the value of my input always empty if I store it in a variable?
  15. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  16. How to pass parameter to function using in addEventListener?
  17. How to convert a DOM node list to an array in Javascript?
  18. Is there a DOM event that fires when an HTML select element is closed?
  19. Can I apply CSS to the elements within an iframe?
  20. Changing the order of elements
  21. createElement vs. createElementNS
  22. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  23. Is there any way of passing additional data via custom events?
  24. getElementsByClassName() with two classes
  25. What is the difference between `firstChild` and `firstElementChild`?
  26. How can I remove wrapper (parent element) without removing the child?
  27. Close a SELECT dropdown list programmatically with Javascript/jQuery
  28. Are dynamically inserted tags meant to work?
  29. Display Spreadsheet Data to HTML Table
  30. Get drop down value

Leave a Comment