2017-04-11 40 views
0

我想在我的動態表中添加Bootstrap select字段,它從其他字段獲取動態數據,但添加多行時無法管理。帶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'); 
      } 
    } 

兩件事情發生,在第一排只有填充下拉只和第二時下一行被添加在選擇第一行消失。

enter image description here

+0

你應該把你的數據樣本,你是如何觸發'addRows'方法。您的文章缺少我們需要的大量信息來複制此問題並向您提供可能的解決方法或解決方案 – Roljhon

+0

單擊「加號」圖標並添加新行時手動添加addRows()函數。 – Rishi

+0

'$(「select#inv_RootCause」)。change(populateRootCause())'你在這方面的目的是什麼?在選擇更改時重新填充選擇元素? – Roljhon

回答

1

給罪人唯一的名稱,您dyanmic下拉菜單中,你可以使用類manipualte常用或生成ID動態地計數或一些其它的值,如:

$("#inv_RootCause'+countval)

維持添加您的COUNTVAL行。

這將解決你的兩個問題。 由於您在下一行使用相同的ID,所以在創建並選擇新行時它會重新初始化。