Question

我有一个带有依赖下拉列表的表。当我选择第一行时它会给出我所选项目的值但是当我添加更多行并从下拉列表中选择一个项目时它会给我第一行的值

这是克隆行

的我的js代码

  <script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
      $('#products tbody>tr:last').clone(true).insertAfter('#products tbody>tr:last');
        //$("#products tbody>tr:last").each(function() {this.reset();});  
      return false;
    });
});

这是我的showdata（）函数

function showData(str){
var e = document.getElementById("pid[]");
var pid = e.options[e.selectedIndex].value;
//xmlhttp.open("GET","viewData?nid="+str+"&pid="+pid,true);
//xmlhttp.send();
alert(pid);}

这是我的HTML代码

<table id="products" align="center" class="bordered">
<thead>
    <tr><th>Item Name</th>
    <th>Action</th></tr>
</thead>
<tbody>
    <tr>
        <td><?php echo form_dropdown('product',$product,null,'id="pid[]" onChange="showData(this.value);"');?></td>
        <td>
            <button id="add">+</button>
        </td>
    </tr>
</tbody>

Answer 1

当你克隆最后一个tr时，它也克隆了按钮的id。所以当你点击第二个按钮时，它指的是第一个id。 Id不应与w3c建议相同。在您的代码中，按钮和下拉列表不需要ID和类，请检查此jsfiddle

http://jsfiddle.net/v4nAa/

你也可以参考下面的代码下拉，不需要showData（）函数

$("#products tbody>tr").on('change','select',function() {
 var pid = $(this).val();
 //xmlhttp.open("GET","viewData?nid="+str+"&pid="+pid,true);
 //xmlhttp.send();
 alert(pid);
});

Answer 2

尝试使用 on() 代表dynamically added elements，

$('#products').on('change','#pid[]', function(){ // use class instead of id #pid[]
    alert('id'+this.value);
});

麻烦克隆具有依赖下拉列表的表行

2 个答案: