具有Bootstrap选择的动态表行

Question

我正在尝试在动态表中添加Bootstrap select字段，该字段从其他字段获取动态数据，但在添加多行时无法管理。

我相信我需要给他们一个唯一的名称或对象数组，但不知道该怎么做。

我的新行添加功能，

addRows:function(tblID){
            var removeRow='<td><button type="button" class="btn btn-xs btn-danger remove500Row" title="Remove" ><i class="fa fa-times"></i></button></td>';
            var rcRow='<td><select class="form-control"  id="inv_RootCause" name="inv_RootCause"></select></td>';
            var rcNo='<td><input type="input" id="inv_RootCauseNo" name="inv_RootCauseNo[]" class="form-control" /></td>';

            $('#'+tblID).append('<tr valign="top">'+removeRow+rcRow+rcNo+'</tr>');

            $("select#inv_RootCause").change(populateRootCause());
        }

populateRootCause:function(){
            if ( $('#Personnel').val() != '' ){
                var arr =  $('#Personnel').val().split(',');
                var opts = '<option value=""></option>';

                $.each(arr, function(n, val) {
                    opts += '<option value="'+ val + '">' + val+ '</option>';
                });

                $('#inv_RootCause').html(opts).trigger('chosen:updated');
            } 
    }

发生了两件事，仅在第一行中填充下拉列表，在添加下一行时仅填充第二行，选择在第一行中消失。

Answer 1

在您的动态下拉列表中显示唯一的名称，您可以使用class for operateualte或动态生成id with count或其他一些值，如：

$("#inv_RootCause'+countval)

在添加行时保持计数。

这将解决您的两个问题。 因为你在下一行使用相同的id，所以当你创建并选择新行时它会重新启动。