jQuery中下拉更改事件的数组_Jquery_Events

jQuery中下拉更改事件的数组

jquery events

jQuery中下拉更改事件的数组,jquery,events,Jquery,Events,我有一系列的下拉列表 <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&

我有一系列的下拉列表

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


$（'.drop'）.bind（“change”，function（）{
var id=$（this.attr（'id'）；
警报（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>


无标题文件
4.
挑选
公斤
网络操作系统
LTR
地铁
var row=$（'#tableID tbody:first'）.html（）；
函数addRow（tableID）{
var-idc=1；
$（行）.appendTo（“#tableID”）；
var rowCnt=$（'#tableID tbody>tr'）。长度；
//警报（rowCnt）；
$（'#tableID tbody>tr:last select[name=“product_group[]”]：first'）.attr（'id'，
“产品组”+rowCnt）；
$（'#tableID tbody>tr:last选择[name=“product_name[]”]：last'）.attr（'id'，
“产品名称”+rowCnt）；
idc++；
}
$（'.product_group'）.bind（“change”，function（）{
var product_group=$（this.val（）；
警报（产品组）；
$.post（'getProductData.php'，{product\u group:product\u group}，函数（数据）{
$（“#产品名称”）.html（数据）；
});
});

您的代码正在运行。检查一下


A.
D
B
E
C
F
$（'.drop'）.bind（“change”，function（）{
var id=$（this.attr（'id'）；
警报（id）；
});

适合我。确保已将其绑定到就绪状态：如果下拉列表是动态创建的，请使用

.on（）

。否则，

.change（）

就足够了。在绑定事件之前，请确保DOM已准备就绪。实际上，我使用了带有链接函数的下拉列表。这会是问题吗？

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