无法使用jquery选择的插件设置所选值

Question

I'm using the chosen plugin from jquery and I want to get the selected value option from my select menu. In my source code, it shows the option that was select previously, from the database. But the selected option doesn't appear.

This is my script:

<script type="text/javascript">
var selectedDistrict = 0;
$(document).ready(function () {
    $('#class_of_my_select').chosen();
    $("#class_of_my_select").change(function () {
        selectedDistrict = $("#class_of_my_select").val();
        $("#class_of_my_select").trigger("chosen:updated").val(selectedDistrict);  
    });
});

And this is my form:

form.php

<select  style="width: 390px;display: inline-block;" class="input-sm form-control" name="class_of_my_select" id="class_of_my_select"  type="text">
     <option value=""></option>

     <?php foreach ($list as $key){ ?>

     <option value="<? echo $key->id; ?>" ><? echo $key->name; ?></option>

     <?}?>