JQuery Select Element Based On Criteria

Question

I have a drop down box for each row inside a table

<table>
<tr>
<th>
 <select name="priorityID" id="priorityID">
<option label="Important" value="1" selected="selected">Important</option>
<option label="semi important" value="2">semi important</option>
<option label="normal" value="3">normal</option>  
<option label="not important" value="4">not important</option>
</select>

 </th> 

</tr>
<tr>
<th>
 <select name="priorityID" id="priorityID">
<option label="Important" value="1" selected="selected">Important</option>
<option label="semi important" value="2">semi important</option>
<option label="normal" value="3">normal</option>  
<option label="not important" value="4">not important</option>
</select>

 </th>

The issue is now whenever the priorityID changes, I need to call a JQuery function to update the database. Now since each row has its own drop down box, how to write the JQuery in such a manner that at the JQuery side, it can capture which row's drop down box firing the event?

Answer 1

You can use the change event along with some radness:

$("select").change(function() {
  var offset = $(this).closest("tr").prevAll().length;
  alert(offset);
});

Answer 2

You can place an ID on each select and include it as a data value when you are using jQuery.post/get.

You can then get it at the server-site to figure out what select-box got changed.

<select name="priorityID" id="1">
<select name="priorityID" id="2">
<select name="priorityID" id="3">

$("select").change(function() {
  $.post(

     "http://api.url.com/method",

     {
       "selectId"      : $(this).attr('id'),
       "selectedValue" : $(this).val()
     },

     function(data) {
        alert('Back!');
     }

  );
});