Select element's id from php loop using jQuery

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
});

flowfree · Accepted Answer · 2012-06-01 02:55:26Z

3

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
});

answered Jun 1, 2012 at 2:55

flowfree

16.5k12 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nick Caballero Over a year ago

In addition to the data-id attribute, adding the id attribute wouldn't hurt here since the id selector is much faster than the regular attribute selector.

nnnnnn Over a year ago

I like the use of the class attributes (the only reason I didn't suggest it in my answer is that you already had), but I'd probably do it without the data-id attribute, instead finding the matching age select with something like $(this).closest('tr').find('.customer_age').

i_ch3ry Over a year ago

Thanks guys, Now you have the data-id in var id. How do I execute a function for customer_class with that specific data-id? Sorry for this newbie question..

flowfree Over a year ago

@AsadoQureshi You should create a new question with more HTML/JS code and explain what you want to achieve.

nnnnnn · Accepted Answer · 2012-06-01 02:57:05Z

0

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.

answered Jun 1, 2012 at 2:57

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

thecodeparadox · Accepted Answer · 2012-06-01 03:32:10Z

0

$('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

edited Jun 1, 2012 at 3:32

answered Jun 1, 2012 at 3:09

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

Select element's id from php loop using jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related