Событие изменения не заполняет раскрывающийся список данными

Последние несколько дней я пытался выяснить, как selected.js обрабатывает события, но безуспешно, поэтому пост. Я перепробовал так много вариантов и конфигураций, что допускаю поражение и надеюсь, что кто-то может помочь.

У меня есть очень простой выбор, который заполняет из MySQL. Это работает хорошо. Теперь, когда я запускаю событие изменения, я вижу, что данные возвращаются в firebug, но в выпадающем списке нет данных. Итак, я думаю, мой вопрос, как, черт возьми, вы работаете с событиями изменения в selected.js.

Если я выберу выбранное из уравнения, оно будет работать хорошо. Я запутался в том, почему я вижу данные в firebug, но выбор не обновляется. большое спасибо.

К вашему сведению: все библиотеки загружены и работают.

HTML

       <div class="fieldset">
<h1><span>Select a Customer</span></h1>
<p>
<select data-placeholder="Choose a customer..." class="chosen-select" style="width:250px;" name="dstr_customer" id="dstr_customer">
<option value=""></option>
<option value="DEMO">DEMO</option>
<option value="DEMO2">DEMO2</option>
<option value="DEMO3">DEMO3</option>
<option value="DEMO4">DEMO4</option>
<option value="DEMO5">DEMO5</option>
</select>
<span></span>
<a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a>
</p>

</div>

<div class="fieldset">
<h1><span>Select a Department</span></h1>
<p>
<select data-placeholder="Choose a dept..." class="chosen-select" style="width:250px;" name="dstr_dept" id="dstr_dept">
<option value=""></option>

</select>
<span></span>
<a href="javascript:void(0)" style="margin-left:10px;" class="tooltip" title="Please select a dept where the box to be destroyed is stored.">Help</a>
</p>
<div class="noDept"></div>
</div>

JS

$(function() {
$("#dstr_customer").change(function() {
$(this).after('<div id="loader"><imgages src="img/loading.gif" alt="loading files" /></div>');
$.get('droptestback.php?cltdstrdept=' + $(this).val(), function(data) {
$('#dstr_dept').html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
$("dstr_dept").trigger("chosen:updated");
//$("#dstr_dept").prop('disabled', false);
});
});
});
});

$(function() {
$("#dstr_customer").chosen({
width: "260px"});
});

$(function() {
$("#dstr_dept").chosen({
width: "260px",
placeholder_text_single: "Select Some Options"});
});

droptestback.php

if (mysql_num_rows($result) > 0) {

echo "<script type=text/javascript>\n";
echo "$(function() {\n";
echo "$(\".noDept\").html('')\n";
echo "var newOption = \"<option value=''>Some Text</option>\"\n";

echo "$(\"#dstr_dept\").attr(\"placeholder\", newOption)\n";
echo "$(\"#dstr_dept\").prop('disabled', false)\n";
echo "});\n";
echo "</script>\n";

//echo "<option value=\"\">Choose Your dept</option>";

while($row = mysql_fetch_array($result)) {
echo "<option value='$row[name]'>$row[name]</option>";
}} else {

echo "<script type=text/javascript>\n";
echo "$(function() {\n";
echo "$('.noDept').html('ERROR: There are no departments that match that company. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
echo "$('#box_dstr').attr('data-placeholder', \"No boxes to display...\").prop('disabled', true)\n";
echo "});\n";
echo "</script>\n";

//echo "<option value='No boxes in that dept'>No boxes in that dept</option>";

}