jquery html页面动态控制和加载

Question

我正在创建一个包含一些复杂逻辑的 HTML 表格 所以我为 GridRow.html 之类的行创建了一个 html 页面，以及一个带有内容表标签的主页，我使用 ajax 请求加载 GridRow.html 页面 并以字符串 html 形式获取结果。在那个页面中，我们有一些选择选项列表，我需要使用一些动态数据来填充它

var optionList = $(data).find('#drpOptions')

$(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").append(data);

但 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();