How can I bind to multiple elements with the same name in jQuery?

Question

I have about 50 items on my screen. Each line is a form that contains one select box. Each select box has the same name, "permission_action"

My code:

$("#permission_action").change(function() {
    $.ajax({  
      type: "PUT",  
      url: this.form.action,  
      data: "permission[action]=" + $("#permission_action").val()  
    });  
});

only binds to the select box in the first form. I want to bind to all of the items.

Answer 1

You can bind the ones with the same name, not the same ID, like this:

$("select[name=permission_action]").change(function() {
    $.ajax({  
      type: "PUT",  
      url: this.form.action,  
      data: {"permission[action]" : $(this).val() }
    });  
});

Answer 2

Use a class instead of an ID, which should be unique.

Answer 3

Use CLASS selector instead of ID, as ID suppose to be unique element.

<input class="permission_action" ... />

in javascript

$(".permission_action").change(...);