Why can't I trigger select change event using C# WebBrowser control?

Question

In the javascript I see the following defined:

 $('#dropDownId').change(function(){        
 ... do stuff...          
 });

 <select id="dropDownId">
     <option value="1">value 1</option>
     <option value="2">value 2</option>
     <option value="3">value 3</option>
 </select>

I've tried using the following code:

 webBrowser.Document.GetElementById("dropDownId").SetAttribute("value", "1");
 webBrowser.Document.GetElementById("dropDownId").Children[1].SetAttribute("selected", "selected");
 webBrowser.Document.GetElementById("dropDownId").InvokeMember("onchange");

I can see the drop down get changed to the right value, but the following never gets executed:

 $('#dropDownId').change(function(){        
 ... do stuff...          
 });

Also, when I look at the properties for "dropDownId" in Chrome, the "onchange" event is null, so how can I invoke the above "change" script for the dropdown?

Answer 1

jquery attaches events to allow for multiple event handlers, that's why onchange property of your select is null.

You can do:

function myChange(){        
 ... do stuff...          
}

<select id="dropDownId" onchange="myChange">
...
</select>

or

webBrowser.Document.InvokeScript("myChange");

or

function myChange_Jquery(){
  $("#dropDownId").change();
}

webBrowser.Document.InvokeScript("myChange_Jquery");