title: Populating a dojo dijit/form/FilteringSelect with an Ajax response text
body: <p>I have two drop downs in my application: to the first drop down (select type of institution), i've attached an onchange event that calls a javascript function (this one makes an ajax call) that is to populate the second drop down (select name of institution).
  The HTML code looks like this: </p>
  
  <pre><code>&lt;label for="typeHighInst"&gt;Type of institution: &lt;/label&gt;
            &lt;select data-dojo-type="dijit/form/FilteringSelect" data-dojo-id="typeHighInst" id="typeHighInst" name="typeHighInst" onChange="getInstitution(this.value)"&gt;
              &lt;option value="" selected='selected'&gt;-- select institution type -- &lt;/option&gt;
              &lt;?php foreach($InstitutionType as $institutiontype): ?&gt;
              &lt;option value="&lt;?php echo $institutiontype['TypeID']; ?&gt;"&gt;&lt;?php echo $institutiontype['Description'];  ?&gt;
              &lt;/option&gt;
              &lt;?php endforeach; ?&gt;
            &lt;/select&gt;
  &lt;label for="nameHighInst"&gt;Name of institution: &lt;/label&gt;
            &lt;select data-dojo-type="dijit/form/Select" data-dojo-id="nameHighInst" id="nameHighInst" name="nameHighInst"&gt;
              &lt;option value="" selected='selected'&gt;-- select institution --&lt;/option&gt;
            &lt;/select&gt;
  </code></pre>
  
  <p>The javascript code looks like this:</p>
  
  <pre><code>function getInstitution(str)
  {
    var xmlhttp;
  
  if (str=="")
  {
      document.getElementById("nameHighInst").innerHTML="&lt;option value='' selected='selected'&gt;-- select institution --&lt;/option&gt;";
      return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
   xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
      {
      //alert(xmlhttp.responseText);
      document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;
      }
  }
  
    xmlhttp.open("GET","includes/getInstitution.php?typeHighInst="+str,true);
    xmlhttp.send();
  }
  </code></pre>
  
  <p>The problem is that when you choose one option from the first drop down (e.g. University), the second drop down list is still empty (instead of showing list of all universities returned by ajax). </p>
  
  <p>However, when I use the native select tag with the second drop down, all works fine (the select object is effectively populated with the list of all universities).</p>
  
  <p>This is the code using the native select element:</p>
  
  <pre><code>&lt;label for="nameHighInst"&gt;Name of institution: &lt;/label&gt;
            &lt;select id="nameHighInst" name="nameHighInst"&gt;
              &lt;option value="" selected='selected'&gt;-- select institution --&lt;/option&gt;
            &lt;/select&gt;
  </code></pre>
  
  <p>Can someone please tell me why it works with the native select element and not with the dijit/form/FilteringSelect widget? I'm a dojo newbie.
  I would also like to know how to fix it. Though the native select works, i prefer using dojo widgets since i discovered them.</p>
  
  <p>Thanks in advance.</p>