Within my application, there are two drop down menus. The first drop down menu allows users to select the type of institution, and I have added an onchange event that triggers a JavaScript function to make an AJAX call in order to populate the second drop down menu with the names of institutions. Here's what the HTML code looks like:
<label for="typeHighInst">Type of institution: </label>
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-id="typeHighInst" id="typeHighInst" name="typeHighInst" onChange="getInstitution(this.value)">
<option value="" selected='selected'>-- select institution type -- </option>
<?php foreach($InstitutionType as $institutiontype): ?>
<option value="<?php echo $institutiontype['TypeID']; ?>"><?php echo $institutiontype['Description']; ?>
</option>
<?php endforeach; ?>
</select>
<label for="nameHighInst">Name of institution: </label>
<select data-dojo-type="dijit/form/Select" data-dojo-id="nameHighInst" id="nameHighInst" name="nameHighInst">
<option value="" selected='selected'>-- select institution --</option>
</select>
The JavaScript function responsible for populating the second drop down menu looks like this:
function getInstitution(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("nameHighInst").innerHTML="<option value='' selected='selected'>-- select institution --</option>";
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 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","includes/getInstitution.php?typeHighInst="+str,true);
xmlhttp.send();
}
The issue I'm facing is that when a user selects an option from the first drop down menu (e.g. University), the second drop down menu remains empty instead of displaying a list of universities retrieved via AJAX.
Interestingly, when I switch to using the native select element for the second drop down menu, everything works as expected (the list of universities is displayed correctly).
My question is why does it work with the native select element but not with the dijit/form/FilteringSelect widget? As a newcomer to Dojo, I would appreciate any insights or guidance on how to resolve this issue. Although the native select functionality works, I am keen on utilizing Dojo widgets moving forward.
Thank you in advance for your help.