动态 table 行 Bootstrap select

Question

我正在尝试在我的动态 table 中添加 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');
            } 
    }

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

Answer 1

要为您的动态下拉列表指定唯一名称，您可以使用 class 通常进行操作或使用计数或其他一些值动态生成 ID，例如：

$("#inv_RootCause'+countval)

在添加行时保持计数值。

这将解决您的两个问题。因为您在下一行使用了相同的 ID，所以当您创建新行时它会重新初始化并 select。

动态 table 行 Bootstrap select

Dynamic table rows with Bootstrap select

jquery

bootstrap-modal

bootstrap-select