ComboBox changes using select

[karmac]

Hi,

I am trying to figure out how to update/append  the contents/options of easyui-combobox using javascript after fetching json data from server.

my script inside the .html

var xmlhttp = getRequestObject();
            xmlhttp.onreadystatechange = function()
            {
                 if ((xmlhttp.readyState === 4) && (xmlhttp.status === 200)) {
                    try {
                        var xmlDocument = xmlhttp.responseText;
                        var dpanel = document.getElementById("reportdate");
                        if(xmlDocument !== null) {
                            var valJS = JSON.parse(xmlDocument.toString());
                            var output = "";
                            $.each(valJS, function(key, obj) {
                                output += '<option value="'+ obj +'">'+ obj +'</option>';
                                });
                            dpanel.innerHTML=output;
                        }
                    }
                    catch (err) {
                        alert("error=" + err.message);
                    }
                }
            };

the html code is as follows

 <div id="datepanel">
           
            <select  name="reportdate" id="reportdate" style="width:200px;" class="easyui-combobox">
            </select>

 </div>

With the above code once the page is loaded, i am able to see <options> inside the select updated, but the same is not reflected in the combobox[ie the combo is empty].
On the other hand, if i remove the class="easyui-combobox", the the options are visible on the page.

I dont know what i am doing wrong. Any help would be greatly appreciated.

[stworthy]

Calling 'loadData' method is the simplest way to update combobox's data.

Code:

var data = ...  // get data
$('#reportdata').combobox('loadData', data);