Get id of clicked element using jquery

Question

I have a series of select boxes within a table. The html is:

<td id="1">
  <select id="a" name="xxx"> 
     <option ... </option>
  </select>
</td>

<td id="2">
   <select id="b" name="yyy"> 
     <option ... </option>
   </select>
</td>

... etc.

When a select box option is changed, how can i use jquery to return the id of the select box and the td?

I think it should be something like:

$(document).ready(function() {

    $('select').change(function() { 
    var id = $(this).attr('id');
    return false; 
    });
});

Working Fiddle

Answer 1

You can also use on function with change event and find the td using the closest

$(document).ready(function() {
        $('select').on('change',function() { 
            var id = $(this).attr('id');
            var tdid = $(this).closest('td').attr('id');
            return false; 
        });
});

Answer 2

Try this

$('select').change(function() { 
var id = $(this).attr('id');
var tdid = $(this).parent().attr('id'); // or $(this).closest('td').attr('id');
return false; 
});

DEMO

Answer 3

Demo

Use .closest() or .parent() to get reference to <td>

$(document).ready(function() {

    $('select').change(function() { 
        var id = this.id;
        var tdId = $(this).closest('td').attr('id');  //or .parent()
        return false; 
    });
});

Answer 4

Use .parent() in jquery

$('select').change(function() { 
        var id = $(this).attr('id');
         var parentId = $(this).parent().attr('id');

        });

Answer 5

Try this : use .closest() to find parent td

$(document).ready(function() {

    $('select').change(function() { 
    var id = $(this).attr('id'); // id of select box
    var idOfTd = $(this).closest('td').attr('id');//id of td
    return false; 
    });
});