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

Question

How can I change an HTML <select>'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?

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true;' value="Change option to 2" />

But y do you want to trigger onchange event? You can do same stuff where you are selecting the option.. — Vicky Gonsalves
– Vicky Gonsalves, Commented Oct 12, 2013 at 3:01

Kate Orlova · Accepted Answer · 2020-04-27 07:12:11Z

154

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

edited Apr 27, 2020 at 7:12

Kate Orlova

3,3585 gold badges15 silver badges37 bronze badges

answered Feb 4, 2015 at 14:56

Lewis

15k14 gold badges70 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abid Ali Over a year ago

what if i again select the same option. It does not fire the change event again.

Hassan Dad Khan Over a year ago

If i run $('#sel').val('3'); it will not get fire. Do you have any idea why?

gary Over a year ago

For React developers, you must use new Event('input', { bubbles: true }). the bubbles: true is essential to propagate the event to React's event handling layer.

Kamran Over a year ago

The alert is a blocking function. Instead try using console.log.

Daniel Kaplan Over a year ago

For me this fires twice each time

Karol · Accepted Answer · 2015-01-29 06:11:44Z

29

+50

Fiddle of my solution is here. But just in case it expires I will paste the code as well.

HTML:

<select id="sel">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" id="button" value="Change option to 2" />

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

answered Jan 29, 2015 at 6:11

Karol

8,09313 gold badges51 silver badges68 bronze badges

2 Comments

Eraden Over a year ago

Additionally:

button.addEventListener('click', function (e) {     sel.options[1].selected = true;     /*since ie9 this is possible, for ie8 and below you need to add some hacks*/     sel.dispatchEvent( new CustomEvent('change') ); });

Kieran Ryan Over a year ago

Thanks Karol "createEvent" path in Angular also works for IE11 :-)

myhappycoding · Accepted Answer · 2015-02-03 10:25:58Z

24

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

answered Feb 3, 2015 at 10:25

myhappycoding

6589 silver badges21 bronze badges

1 Comment

aatwo Over a year ago

was having this issue in react / electron. The last part of this answer was the only fix that worked for me! Thank you.

Ryan Wheale · Accepted Answer · 2015-02-04 19:21:55Z

6

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.

answered Feb 4, 2015 at 19:21

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Comments

Vicky Gonsalves · Accepted Answer · 2013-10-12 03:18:00Z

4

Try this:

<select id="sel">
 <option value='1'>One</option>
  <option value='2'>Two</option> 
  <option value='3'>Three</option> 
  </select> 


  <input type="button" value="Change option to 2"  onclick="changeOpt()"/>

  <script>

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

alert("changed")
  }

  </script>

answered Oct 12, 2013 at 3:18

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:17:45Z

These questions may be relevant to what you're asking for:

Here are my thoughts: You can stack up more than one call in your onclick event like this:

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true; alert("changed");' value="Change option to 2" />

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

<select id="sel" onchange='doThisOnChange(this.value)'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='doThisOnChange(null,1);' value="Change option to 2"/>

<script>
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 );
}
</script>

This is another fake solution. What if someone attached a lot of handlers to onchange on select element? How will this construction work? The one thing for sure is that it will not trigger any of them...

Primoshenko · Accepted Answer · 2019-02-22 14:25:36Z

1

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

answered Feb 22, 2019 at 14:25

Primoshenko

1401 silver badge10 bronze badges

Comments

eldano · Accepted Answer · 2013-10-12 03:15:35Z

-2

You can fire the event manually after changing the selected option on the onclick event doing: document.getElementById("sel").onchange();

answered Oct 12, 2013 at 3:15

eldano

231 bronze badge

2 Comments

Teemu Over a year ago

This works (with some limitations) only when onchange property has been set, not with inline handlers.

Mithun Billara Over a year ago

document.getElementById(...).onchange is not a function if there is no inline handlers.

Collectives™ on Stack Overflow

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

8 Answers 8

5 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related