Display default option select message

I am trying to find a way that when a jQuery chosen select dropdown is populated from php, then the first item should be 'Select an item'. At the moment, when the dropdown is populated, it displays all items and as such makes a change event difficult because it is already selected. I have even tried to change the placeholder text, but it does not change anything.

I would be grateful if someone could show me how to do this. Thanks

jQuery code

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

Select allOpen in new window

php code

<?php
 session_start();
?>
<?php
    include('../Connections/domain.php');
     
    $dstrdept = $_GET['custdstrdept'];
    $customer = $_SESSION['kt_idcode_usr'];
	
    mysql_select_db($database_domain, $domain);
    $query = "SELECT name FROM departments WHERE code = '".$dstrdept."' ORDER BY name ASC";
	$result = mysql_query($query) or die (mysql_error());
	
	if (mysql_num_rows($result) > 0) {
	
	echo "<script type=text/javascript>\n";
	echo "$(function() {\n";
	echo "$(\".noDept\").html('')\n";
	echo "$('#dstr_dept').attr('data-placeholder', \"Choose your dept...\").prop('disabled', false)\n";
	echo "});\n";
	echo "</script>\n";
	
	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. Please select another.').css({\"color\":\"red\", \"margin\": \"-6px 0 10px 22px\", \"font-size\": \"12px\", \"font-family\": \"Verdana, Geneva, sans-serif\"})\n";
	echo "$('#dstr_dpet').attr('data-placeholder', \"No depts to display...\").prop('disabled', true)\n";
	echo "});\n";
	echo "</script>\n";
	}
?>

Select allOpen in new window

html code

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

Select allOpen in new window