jQuery的html頁面的動態控制和負載

Question

我創建一個HTML表，一些複雜的邏輯 ，所以我創造了一個連續的HTML頁面一樣GridRow.html，並與目錄標籤，我加載GridRow一個主頁。 html頁面使用ajax請求 並得到結果作爲字符串html。在該頁面，我們有一些選擇的選項列表，我需要填補這個使用一些動態數據

VAR optionList = $（數據）.find（ '＃drpOprtions'）

$(document).ready(function() { 
 

 
    var bindDrpValues = function (control, valueList, setting) { 
 

 
     for (var i = 0; i < valueList.length; i++) { 
 

 
      var option = $("<option>"); 
 
      option.attr("value", valueList[i][setting.Id]); 
 
      option.html(valueList[i][setting.DisplayName]); 
 
      $(control).append(option); 
 
     } 
 
    }; 
 

 
    var bindControlValue = function (control, valueList, setting,data) { 
 

 
     var controlType = $(control).prop('tagName'); 
 
     var oldVal = control.outerHTML; 
 
     switch (controlType) { 
 
      case "SELECT": 
 
       bindDrpValues(control, valueList, setting); 
 
       break;; 
 
      case "INPUT": 
 
       break; 
 
      default: 
 
     } 
 

 
     
 
    }; 
 

 
    var addRow = function (data) { 
 
     
 
     var drpTypeOfPharma = $(data).find('#drpTypeOfPharma')[0]; 
 
     var txtDosage = $(data).find('#txtDosage')[0]; 
 
     var control = $(data); 
 

 
     bindControlValue(drpTypeOfPharma, 
 
      [{ "drgTypeId": 1, "drgName": "XYX" }, { "drgTypeId": 2, "drgName": "XYX1" }], 
 
     { 
 
      Id: 'drgTypeId', 
 
      DisplayName: 'drgName' 
 
     },data); 
 

 
     
 
     
 
     $("#tblGrid").append(data); 
 
     
 
    }; 
 

 
    var addNewRow = function() { 
 
     debugger; 
 
     addRow("<tr>\r\n <td>\r\n  <select id=\"drpTypeOfPharma\"></select>\r\n </td>\r\n <td>\r\n  <input type=\"text\" id=\"txtDosage\"/>\r\n </td>\r\n</tr>"); 
 
     
 
     
 
     
 
     // $.ajax({ 
 
     // url: 'url', 
 
     //  success: addRow, 
 
     //  error: function (data) { 
 
     //    debugger; 
 
     //   alert("Fail" + data); 
 
     //   } 
 
     //  }); 
 
    }; 
 

 
    var addEvent = function() { 
 
     $("#btnAdd").click(addNewRow); 
 
    }; 
 
    addEvent(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td>Drp List</td> 
 
     <td>Name</td> 
 
    </tr> 
 
    </thead> 
 
    
 
    <tbody id="tblGrid"> 
 
    
 
    </tbody> 
 
</table> 
 
<input type="button" value="Add" id="btnAdd"/> 
 

 
<br> 
 
<br> 
 
<br>drop down list not fill

這將增加選項中選擇選項

FillOptions(optionList) 

//追加到表 $（ 「＃tblGrid」）追加（數據）。

但UI不與填充選擇選項

Answer 1

添加到虛擬選擇的選項不反映更新。您可以將tr寫入DOM，然後嘗試綁定值或返回更新的數據。

http://jsfiddle.net/mn5b0hjg/2/

var bindDrpValues = function (control, valueList, setting) { 

     for (var i = 0; i < valueList.length; i++) { 

      var option = $("<option>"); 
      option.attr("value", valueList[i][setting.Id]); 
      option.html(valueList[i][setting.DisplayName]); 
      $(control).append(option); 
     } 
     return control; 
    }; 

    var bindControlValue = function (control, valueList, setting,data) { 

     var controlType = $(control).prop('tagName'); 
     var oldVal = control.outerHTML; 
     switch (controlType) { 
      case "SELECT": 
       updatedcontrol = bindDrpValues(control, valueList, setting); 
       var newvalue =$(data).find("select").parent().append(updatedcontrol).closest('tr') 
      $(newvalue).find('select')[0].remove() 
         $("#tblGrid").append(newvalue); 
       break;; 
      case "INPUT": 
       break; 
      default: 
     } 


    }; 

    var addRow = function (data) { 

     var drpTypeOfPharma = $(data).find('#drpTypeOfPharma')[0]; 
     var txtDosage = $(data).find('#txtDosage')[0]; 
     var control = $(data); 

     bindControlValue(drpTypeOfPharma, 
      [{ "drgTypeId": 1, "drgName": "XYX" }, { "drgTypeId": 2, "drgName": "XYX1" }], 
     { 
      Id: 'drgTypeId', 
      DisplayName: 'drgName' 
     },data); 





    }; 

    var addNewRow = function() { 
     addRow("<tr>\r\n <td>\r\n  <select id=\"drpTypeOfPharma\"></select>\r\n </td>\r\n <td>\r\n  <input type=\"text\" id=\"txtDosage\"/>\r\n </td>\r\n</tr>"); 



     // $.ajax({ 
     // url: 'url', 
     //  success: addRow, 
     //  error: function (data) { 
     //    debugger; 
     //   alert("Fail" + data); 
     //   } 
     //  }); 
    }; 

    var addEvent = function() { 
     $("#btnAdd").click(addNewRow); 
    }; 
    addEvent();