Question

我有两个包含客户信息的下拉列表。使用PHP for循环，我允许一次输入5个客户详细信息。

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

现在我想以这样的方式执行jQuery函数：例如，如果customer_2_class发生更改，它会对相应的customer_2_age执行某些函数。

$("#customer_?_clas").change(function()
{
   //some function to execute on corresponding customer_?_age
});

Answer 1

将类添加到<select>并将ID移至另一个属性，例如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>";

在你的javascript中：

$('.customer_class').change(function() {
  var id = $(this).attr('data-id');
  // process customer_class with this id
});

Answer 2

您可以使用attribute ends-with selector：

$('select[id$="_class"]').change(function() {

值得浏览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

使用jQuery从php循环中选择元素的id

3 个答案: