Chosen with Ajax in Classic Asp - ajax

Question

I'm new to Ajax and Chosen so please bear with me. I'm trying to reload a second select box based on the selection of the first one. All of my select boxes are using the Chosen plugin.
First, this is my JQuery function for chosen.
$(function(){
$('.TeacherName').chosen({ max_selected_options: 1, placeholder_text_multiple: "Select A Teacher"});
$('.Schools') .chosen({ max_selected_options: 1, placeholder_text_multiple: "Select A School" });
});
</script>
Next I load the two boxes from a record-set.
<select class="Schools" name="Schools" id="schoolDrop" style="max-width:210px;" multiple="multiple" onchange="getLocation(this.value);">
<% while not SchoolList.eof%>
<option value="<%=SchoolList("SCHOOL_NUMBER")%>"><%=SchoolList("NAME")%> </option>
<%SchoolList.MoveNext
wend%>
</select>
<select class="TeacherName" name="TeacherName" id="TeacherName" multiple="multiple"style="max-width:150px;">
<option value="0"></option>
<%while not TeacherList.eof%>
<option value="<%=TeacherList("DCID")%>"</option>
<%TeacherList.MoveNext
wend%>
</select>
As you can see I call the Ajax function in an onchange event in the Schools select box.
Next is my Ajax Function.
function getLocation(schoolId)
{
var strURL="SetTeacherAjax.asp?school="+schoolId;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
document.getElementById('TeacherName').innerHTML=req.responseText;
} else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}//End of Function getLocation
The ajax works if I remove the class selector from the TeacherName drop down.

Answer 1

I've figure this out, so I'll post it as it may help someone else. I needed to add an update statement for Chosen plugin.
enter code here if (req.status == 200)
{
document.getElementById('TeacherName').innerHTML=req.responseText;
$('#TeacherName').trigger('chosen:updated');
} else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
Once I added the
$('#TeacherName').trigger('chosen:updated');
it worked.