Question

我有一系列下拉列表

<select name="dd1[]" class="drop" id="id1">
<option>
</select>
<select name="dd1[]" class="drop" id="id2">
<option>
</select>
<select name="dd1[]" class="drop" id="id3">
<option>
</select>

$('.drop').bind("change",function(){
var id = $(this).attr('id');
alert(id);
});

我希望在更改3个下拉列值中的任何一个时触发on change事件。该问题目前仅在第一次下拉时触发更改，并且对于剩余的选择框不起作用。我试过改变，活着，也没有工作。

有人可以帮忙吗？

更新：这是完整的代码，仍然无法正常工作

<?php
include('CL_Base.php');
$g = new DBClass();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body> <input class="btn btn-sm btn-success" onClick="addRow(tableID)"  type="button"
   id="button2" value="Add Products" >

<table class="table text-sm" id="tableID">
<tbody>      


                        <tr  style="height: 52px;">
                           <td>


                                4   
                                        </td>

                        <td style="width:220px">
                <select id="product_group" class="product_group form-control"   name="product_group[]">
                <?php

  $g->query("select * FROM  expensehead");
  $g->execute();
  $group=$g->resultset();
   echo'<option >Select</option>';

   foreach($group as $data2)

   {

    echo '<option value="'.$data2['id'].'">'.$data2['expense'].'</option>';
  }

                                             ?>


</select></td><td style="width:100px">
<!--    onChange="vat(this.value)"    -->            
<select class="product_name form-control" id="product_name"  name="product_name[]">

</select></td>  <td>   <select class="form-control"  >
<option>Select</option>

<option value="KG">KG</option>      
<option value="NOS">NOS</option>  
  <option value="LITR">LTR</option>  
    <option value="MTRS">MTRS</option>  

 </select></td> 
                <td  colspan="2"><input id="stock_in_hand" name="stock_in_hand[]"
  placeholder="Stock in Hand" type="text" class="form-control"   />                  
                </td> 
                <td><input id="req_qty" name="req_qty[]" placeholder="Required Qty" 
  type="text" class="form-control"  />  </td>
                   <td><input id="prod_rate" name="prod_rate[]"  placeholder="Rate" 
  type="text" class="form-control" />  </td>   <td><input id="vatid" name="vatid[]" 
  type="text" class="form-control"  placeholder="VAT"   />  </td>

                <!--<div id="vatlist"></div>         -->                             

                </tr> </tbody></table>  
  <script type='text/javascript'>

   var row = $('#tableID tbody:first').html();

   function addRow(tableID) {
   var idc=1;
   $(row).appendTo('#tableID');

   var rowCnt = $('#tableID tbody>tr').length;
  //alert(rowCnt);
   $('#tableID tbody>tr:last select[name="product_group[]"]:first').attr('id',  
   'product_group' + rowCnt);
   $('#tableID tbody>tr:last select[name="product_name[]"]:last').attr('id', 
   'product_name' + rowCnt);

    idc++;

 }

  $('.product_group').bind("change",function(){ 
  var product_group = $(this).val(); 
  alert(product_group);
  $.post('getProductData.php', {product_group:product_group}, function(data){ 
    $('#product_name').html(data); 
});
});
</script>
</body>
</html>

Answer 1

您的代码正常运行。在jsfiddle

上查看

<select name="dd1[]" class="drop" id="id1">
    <option>A</option>
    <option>D</option>
</select>
<select name="dd1[]" class="drop" id="id2">
    <option>B</option>
    <option>E</option>
</select>
<select name="dd1[]" class="drop" id="id3">
    <option>C</option>
    <option>F</option>
</select>



$('.drop').bind("change",function(){
var id = $(this).attr('id');
alert(id);
});

jQuery中的下拉列表更改事件的数组

1 个答案: