进行内联编辑时，如何在数据表中显示带有值的下拉列表？

Question

在执行内联编辑时，我需要在特定单元格中显示一个下拉列表，并且需要从数据库加载该下拉列表中的值。 我知道如何在数据表外部的下拉列表中加载值。 它在数据表中时是否也是相同的过程？
请给我一些想法来执行此任务？

这是我的代码，其中单击的行将具有文本框和下拉列表（不包含任何值）

   var table = $('#jsontable').DataTable();
        $('#jsontable').DataTable().column(0).visible(false);
        $('#jsontable').DataTable().column(3).visible(false);           
        var nEditing = null;          
            $('#jsontable tbody').on('dblclick', 'tr', function () {                           
            var nRow = $('#jsontable').dataTable().fnGetNodes(this);
            d = $('#jsontable').DataTable().row(this).data();
            editRow(table, nRow);
            nEditing = nRow;
        });
 function editRow(table, nRow){          
        var jqTds = $('>td', nRow);      
        jqTds[0].innerHTML = '<div class="col-sm-3"><select class="form-control" value: "' + d[1] + '" optionsCaption: "All"  id="channel"></select></div>';          
        jqTds[1].innerHTML = '<input type="text" value="' + d[2] + '">';
        jqTds[2].innerHTML = '<input type="text" value="' + d[4] + '">';
        jqTds[3].innerHTML = '  <div class="col-sm-6" id="dt-container" data-bind="validationElement: locationEffcetivefromdate"><div class="input-append input-group date"> <input type="text" value="' + d[5] + '"><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>';          
            }

这是我的表格的html代码，

<div id="locationtable" class="ibox-content">

                    <table id="jsontable" class="table table-striped table-bordered table-hover dataTables-example" style="width:100%">
                        <thead>
                            <tr>
                                <th style="visibility:hidden">ID</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th style="visibility:hidden">Address</th>
                                <th>Effective From</th>
                                <th>Effective To</th>
                            </tr>
                        </thead>
                    </table>
                </div>

Answer 1

您可以使用如下所示的内容：

    jqTds[1].innerHTML = '<select type="text"  class="form-control input-small">' +
                                        '<option value="' + aData[1] + '">' + aData[1] + '</option>' +
                                        '<option value="contains">Contains</option>' +
                                        '<option value="starts">Starts with</option>' +
                                        '<option value="postal">Postal Radius</option>' +
                                        '</select>';