php - Change event not populating dropdown with data -

i have been trying past few days figure out how chosen.js handles change events no success hence post. have tried many options , configurations, admitting defeat , hoping can help.

i have simple select populates mysql. works ok. now, when trigger change event, can see data being returned in firebug, no data present in dropdown. so, guess question is, how hell work change events in chosen.js.

if take chosen out of equation, works well. getting confused why can see data in firebug select not updating. many thanks.

fyi: assume libraries loaded , working.

html

       <div class="fieldset">           <h1><span>select customer</span></h1>           <p>             <select data-placeholder="choose 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 dept box destroyed stored.">help</a>           </p>          </div>          <div class="fieldset">           <h1><span>select department</span></h1>           <p>             <select data-placeholder="choose 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 dept box destroyed 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 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 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 no departments match 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 display...\").prop('disabled', true)\n";     echo "});\n";     echo "</script>\n";      //echo "<option value='no boxes in dept'>no boxes in dept</option>";      } 

$("dstr_dept").trigger("chosen:updated"); missed # before dstr_dep