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.)

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.)

• javascript
• select
• onchange

• Possible duplicate. Seen this today. – EFraim Commented Aug 3, 2009 at 21:32
• I did a search, but didn't find anything. – sprugman Commented Aug 3, 2009 at 21:34
• I am looking for it. Obviously it is worded differently... – EFraim Commented Aug 3, 2009 at 21:34
• 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 Commented Aug 3, 2009 at 21:35
• maybe this one: stackoverflow.com/questions/1219026/… – sprugman Commented Aug 3, 2009 at 21:35

6 Answers 6

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.)

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

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.

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)

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)

Try assigning selectedIndex instead.