C# Razor drop down list onchange selectedIndex undefined

Question

I have define the following dropdown list

@Html.DropDownList("shareId", new SelectList(
                              ViewBag.shareUsernames,
                              "value", "text"), 
                              new { htmlAttributes = new { @class = "form-control" }}))

and the following jQuery script for callback

<script type="text/javascript">
    $("#shareId").change(function () {
        var myIndex = $("#shareId").selectedIndex
        var selValue = $("#shareId").options[myIndex].value
        $("#response").text = selValue
    });
</script>

I change the dropdown list value and catch the undefined error in myIndex assignment. When I use chrome debugger, I see the $("#shareId").selectedIndex is 1.

So why it cannot assign to myIndex? why myIndex is undefined?

Answer 1

Your are mixing up javascript and jQuery. Use this.value like following.

$("#shareId").change(function () {
    $("#response").val(this.value)
});