I have a dropdown that is filled and is using the Chosen plughin. When selected the value, not text, is needed to fill out the page. I have tried a few different ways, but none seem to work.

**The markup:**

```
<select class="chzn-select" data-placeholder=" -- Select Course -- " id="CourseDropDown" name="CourseDropDown">
    <option value=""></option>
    <option value="1">Option 1</option>
</select>

```

**Things I have tried:**

```
$('#CourseDropDown').on('change', function () {
    var courseID = $(this).val();
....
    var courseID = $('#CourseDropDown').val();
....
    var courseID = $('#CourseDropDown :selected').val();
....

```

All of these return an empty string. 

I am able to get the text from the selection by doing

```
var courseID = $(this).text();

```

The markup clearly has a value set for the selection. Its selecting the correct thing and returning the text. What would cause it to return an empty string instead of the value 1.