Question

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

var optionList = $（data）.find（＆＃39;＃drpOprtions＆＃39;）

＆＃13;

$(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();
})

＆＃13;

<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

＆＃13;

这将添加选项以选择选项

FillOptions(optionList)

//附加到表格 $（＆＃34;＃tblGrid＆＃34）附加（数据）;

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

Jquery html页面动态控制和加载

1 个答案: