Select element's id from php loop using jQuery - php

Question

I have two dropdown lists containing customers info.
Using PHP for loop, I have allowed to enter 5 customers details at a time.
for($i=1; $i<6; $i++)
{
echo "<tr><td><select id=\"customer_" . $i . "_class\"></select></td>";
echo "<td><select id=\"customer_" . $i . "_age\"></select></td></tr>";
}
Now I want to execute a jQuery function in such a way that if, for example, customer_2_class changes, it executes some function to its corresponding customer_2_age.
$("#customer_?_clas").change(function()
{
//some function to execute on corresponding customer_?_age
});

Answer 1

Add class to your <select> and move the id to another attribute, like data:
echo "<tr>";
echo "<td><select class=\"customer_class\" data-id=\"$i\"></select></td>";
echo "<td><select class=\"customer_age\" data-id=\"$i\"></select></td>";
echo "</tr>";
And in your javascript:
$('.customer_class').change(function() {
var id = $(this).attr('data-id');
// process customer_class with this id
});

Answer 2

You could use the attribute ends-with selector:
$('select[id$="_class"]').change(function() {
It might be worth browsing through the full list of jQuery selectors.

Answer 3

$('select').
filter(function() {
return /^customer_[0-9]_class$/.test(this.id); // filter on select
// based on id format
})
. change(function() { // binding change
// to filtered select
var num = this.id.match(/\d/)[0]; // get numerical value
// of select box on change
$('#customer_' + num + '_age') // point to target select
.css('background', '#f00'); // do something
});
Working sample