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

Question

I need to display a dropdownlist in a particular cell while performing inline editing and need to load the values in the dropdownlist from the datatbase. I know how to load the values in the dropdownlist outside the datatable. Is this the same process while it is inside the datatable?.
Please give me some ideas to perform this task?

This is my code, where the row that is clicked will have the textbox and the dropdownlist (without any values)

   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>';          
            }

This is my html code for the table,

<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

You could use something like below:

    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>';