Change select s option and trigger events with JavaScript

Question

How can I change an HTML  lt select gt  s option with JavaScript  without any libraries like jQuery   while triggering the same events as if a user had made the change   For example using following code  if I change the option with my mouse then an event triggers  i e  onchange is run   However  when I change the option using JavaScript then it doesn t fire any event  Is it possible to fire trigger associated event handlers like onclick  onchange  etc   when an option is selected with JavaScript    lt select id  sel  onchange  alert  changed    gt     lt option value  1  gt One lt  option gt     lt option value  2  gt Two lt  option gt     lt option value  3  gt Three lt  option gt   lt  select gt   lt input type  button  onclick  document getElementById  sel   options 1  selected   true   value  Change option to 2    gt    http   jsfiddle net xwywvd1a

User · Answer

Try this    lt select id  sel  gt    lt option value  1  gt One lt  option gt     lt option value  2  gt Two lt  option gt      lt option value  3  gt Three lt  option gt      lt  select gt        lt input type  button  value  Change option to 2   onclick  changeOpt     gt      lt script gt     function changeOpt      document getElementById  sel   options 1  selected   true   alert  changed           lt  script gt

User · Answer

These questions may be relevant to what you re asking for    How can I trigger an onchange event manually  How to trigger an event in an input field changed with javascript   Here are my thoughts  You can stack up more than one call in your onclick event like this    lt select id  sel  onchange  alert  changed    gt     lt option value  1  gt One lt  option gt     lt option value  2  gt Two lt  option gt     lt option value  3  gt Three lt  option gt   lt  select gt   lt input type  button  onclick  document getElementById  sel   options 1  selected   true  alert  changed     value  Change option to 2    gt    You could also call a function to do this   If you really want to call one function and have both behave the same way  I think something like this should work  It doesn t really follow the best practice of  Functions should do one thing and do it well   but it does allow you to call one function to handle both ways of changing the dropdown  Basically I pass  value  on the onchange event and  null  index of option  on the onclick event   Here is the codepen  http   codepen io mmaynar1 pen ZYJaaj   lt select id  sel  onchange  doThisOnChange this value   gt   lt option value  1  gt One lt  option gt   lt option value  2  gt Two lt  option gt   lt option value  3  gt Three lt  option gt   lt  select gt   lt input type  button  onclick  doThisOnChange null 1    value  Change option to 2   gt    lt script gt  doThisOnChange   function  value  optionIndex        if   optionIndex    null                var option   document getElementById   sel    options optionIndex          option selected   true         value   option value            alert   Do something with the value      value       lt  script gt

User · Answer

The whole creating and dispatching events works  but since you are using the onchange attribute  your life can be a little simpler   http   jsfiddle net xwywvd1a 3   var selEl   document getElementById  sel    selEl options 1  selected   true  selEl onchange      If you use the browser s event API  addEventListener  IE s AttachEvent  etc   then you will need to create and dispatch events as others have pointed out already

User · Answer

html using Razor     Html DropDownList  test1   Model SelectOptionList  new   id    test1   onchange    myFunction         JS Code    function myFunction                  var value   document getElementById  test1   value               console log  it has been changed  to     value

User · Answer

Unfortunately  you need to manually fire the change event  And using the Event Constructor will be the best solution    x000D   x000D  var select   document querySelector   sel    x000D      input   document querySelector  input type  button      x000D  select addEventListener  change  function    x000D      alert  changed    x000D      x000D  input addEventListener  click  function    x000D      select value   2  x000D      select dispatchEvent new Event  change     x000D      x000D   lt select id  sel  onchange  alert  changed    gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D     lt option value  3  selected gt Three lt  option gt  x000D   lt  select gt  x000D   lt input type  button  value  Change option to 2    gt  x000D   x000D   x000D    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

User · Answer

It is as simple as this   var sel   document getElementById  sel    var button   document getElementById  button     button addEventListener  click   function  e        sel options 1  selected   true      sel onchange          But this way has a problem  You can t call events just like you would  with normal functions  because there may be more than one function listening for an event  and they can get set in several different ways   Unfortunately  the  right way  to fire an event is not so easy because you have to do it differently in Internet Explorer  using document createEventObject  and Firefox  using 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

User · Answer

You can fire the event manually after changing the selected option on the onclick event doing  document getElementById  sel   onchange

User · Answer

Fiddle of my solution is here  But just in case it expires I will paste the code as well   HTML    lt select id  sel  gt     lt option value  1  gt One lt  option gt     lt option value  2  gt Two lt  option gt     lt option value  3  gt Three lt  option gt   lt  select gt   lt input type  button  id  button  value  Change option to 2    gt    JS   var sel   document getElementById  sel        button   document getElementById  button     button addEventListener  click   function  e        sel options 1  selected   true          firing the event properly according to 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  changed

[javascript] Change <select>'s option and trigger events with JavaScript

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to html-select

Examples related to dom-events