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

Question

I have several selection lists per page. They are all named as an array, so they return the Controller to the list for the viewmodel. When they are displayed, they look like these:

<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 so that I can call a .ajax call to populate another dropdown based on the meaning of this, but the binding does not work. 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()); }); }); 

Received error "The object does not support this property or method . " But the first warning clearly shows that the element is selected because it displays the name correctly.

What am I doing wrong here?

Answer 1

Edit:

 var dropdown = this; 

To:

 var dropdown = $(this); 

change () is a jQuery object method, so you need to wrap this when calling jQuery() or $() .