What is wrong with this JQuery binding for a SELECT list?

Question

I have several select lists on a page. They are all named in array-fashion so that they postback to the Controller in a list for a viewmodel. When they are rendered, they look as such:

<select id="OrderItemViewModels_2__OrderItemStatusId" name="OrderItemViewModels[2].OrderItemStatusId"><option value="-1"></option>
<option value="1">CONFIRMED</option>
<option value="2">NO SALE</option>
<option value="3">PENDING</option>
</select>

I am trying to bind .change() event handlers to them so I can trigger an .ajax call to fill another dropdown based on the value of this one, but the binding is not working. The JS looks like this:

 $(document).ready(function () {
      $('select[name$="OrderItemStatusId"]').each(function (){
        //alert(this.name);
        var dropdown = this;
        dropdown.change(function() {
          alert('testing ');
          //GetOrderItemReasons(dropdown.val());
        });
      });

The error I receive is "Object doesn't support this property or method". But, the first alert shows clearly that the item is being selected, because it shows the name correctly.

What am I doing wrong here?

Answer 1

Change:

var dropdown = this;

To:

var dropdown = $(this);

change() is a method of a jQuery object, so you'll need to wrap this in a call to jQuery() or $().