How do I programmatically change a select so that it fires its onchange behavior?

Question

This doesn't seem to be working:

<select id="mySel" onchange="alert('foo')">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<script>
dojo.byId('mySel').value = 'b'; // select changes, but nothing is alerted
</script>

(I'm using dojo, but that doesn't really matter.)

I would have to argue that using dojo *does* matter in this instance, since you're not using the typical javascript way of changing the selected item in a drop down. Have you tried changing mySel.selectedIndex? — ajh1138, Aug 03 '09 at 21:35
maybe this one: http://stackoverflow.com/questions/1219026/detect-programmatical-changes-on-a-html-select-box — sprugman, Aug 03 '09 at 21:35
Here it is: http://stackoverflow.com/questions/1219026/detect-programmatical-changes-on-a-html-select-box — EFraim, Aug 03 '09 at 21:36
@ajh1138. I'm pretty sure all dojo is doing here is aliasing document.getElementById. I'll try the selectedIndex method, though. (After I finish reading through that other question.) — sprugman, Aug 03 '09 at 21:37

score 8 · Accepted Answer · answered Aug 03 '09 at 21:40

The 'onchange' name is a little misleading unless you understand that a change event and a value being changed aren't the same thing. A change event occurs when the user changes the value in the browser. I believe you can fire the event manually by calling dojo.byId('mySel').onchange() after you programmatically change the value, though. (You might need to actually define a function that calls alert, though. I haven't done this myself.)

score 4 · Answer 2 · answered Aug 15 '15 at 16:11

For anyone looking to trigger the change event using javascript.

        var evObj = document.createEvent("HTMLEvents");
        evObj.initEvent("change", true, true);
        var elem = document.getElementById('some-id');
        elem.dispatchEvent(evObj);

score 3 · Answer 3 · answered Aug 03 '09 at 21:37

This will change the value but not fire the onchange event. Any time you modify an element with JavaScript it will not fire the event (stops you from getting into recursion issues*).

If you set up an event handler like so.

function myHandler(){
  //do whatever stuff here
  changeColor( dojo.byId('mySel') );
}

then you can call this separately, after you set the value programatically.

Note (*): I'm not a dojo expert... so I'm presuming they haven't "added" the automatic calling of the event handlers when you set the value from JavaScript.

score 2 · Answer 4 · edited May 23 '17 at 11:59

2

You might take a look at these questions and their answers : they might help :

Detect programmatical changes on a html select box.
How do I programatically force an onchange event on an input? (focused on input, and not select, but might still be useful)

edited May 23 '17 at 11:59

Community

1
1

answered Aug 03 '09 at 21:36

Pascal MARTIN

395,085
80
655
663

score 1 · Answer 5 · answered Sep 07 '09 at 22:19

you can access the event 'onpropertychange' it contains a property within the event arguments to identify which property was changed.

It detects both 'selectedIndex' and 'value' changes - simply case test 'propertyName'

<select id="mySel" onpropertychange="dothis(event);">
    <option value="a">a</option>    
    <option value="b">b</option>
</select>

function dothis(event)
{

    if (event.propertyName == "selectedIndex")
            alert('selection changed');
}

off the top of my head... (currently using the asp.net js framework which is quite abit different)

score 0 · Answer 6 · answered Aug 03 '09 at 21:37

0

Try assigning selectedIndex instead.

answered Aug 03 '09 at 21:37

Ray

1,585
9
10

How do I programmatically change a select so that it fires its onchange behavior?

6 Answers6

Linked