JavaScript onchange event won't fire if select option is changed from other methods

Question

I have a select element and a button.

When the option from the select element is changed, it evokes some function:

<select id="mySel" onchange="someFunction();">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
</select>

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;"/>

someFunction() is only evoked when I change the option from the select element itself, not when I click the button.

What I'm trying to do is to get the select element onchange event to fire regardless where the option is being changed from.

I know that I can add someFunction() to the button onclick event, but that's not what I'm looking for.

Any ideas will be appreciated.

http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — Tschallacka, Oct 04 '16 at 12:16
http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us — techie_28, Oct 04 '16 at 12:22

score 2 · Accepted Answer · edited May 23 '17 at 11:48

You can add an event-listener when the DOM loads, sou you'll get the event callback every time it's fired "programatically" and no "event calls" inside the respective element tags, bringing you a cleaner code.

Run this example, hope it helps:

// Wait for WINDOW LOAD
window.onload = function() {
  // - Bind onchange event listener to the <select> DOMNode
  // - Your "someFunction" function is fired here!
  document.getElementById('mySel').addEventListener('change', someFunction); 
  
  // Trigger the change from the '#your_button' click callback
  document.getElementById('your_button').addEventListener("click", function () {
    // Create a new 'change' event
    var event = new Event('change');
    // Dispatch it
    document.getElementById('mySel').dispatchEvent(event);
  });
}

// Your function - Look at the console
function someFunction() {
  console.log('here!'); 
}

<select id="mySel">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<input type="button" id="your_button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;"/>

You can see more about in: Select Tag Change Event Call on Selected Index Change

score 1 · Answer 2 · answered Oct 04 '16 at 12:23

1

change your button html.

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;someFunction();"/>

Or manually trigger change event as per mentioned links in comments.

answered Oct 04 '16 at 12:23

Deepak Sharma

409
4
14

That's not what I'm looking for... I want to know if the onchange event can be fired without the user setting a different option from the select element itself. – Oct 04 '16 at 12:32
changing value of selectedIndex programatically won't result into firing of onchange event. This happens in Windows application but in html/javascript you will have to manually trigger this event. – Deepak Sharma Oct 04 '16 at 12:35

score 0 · Answer 3 · answered Oct 04 '16 at 12:29

Use this you'll get what you want.

function someFunction(select){
  console.log('reached here');
  
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="mySel" onchange="someFunction();">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
</select>

<input type="button" value="Click" onclick="document.getElementById('mySel').selectedIndex = 0;someFunction();"/>

Not what I'm looking for... I don't want the button to call the function. — , Oct 10 '16 at 14:40

JavaScript onchange event won't fire if select option is changed from other methods

3 Answers3