Question

这个问题让人想起我几年前问的一个问题：

这是成功填充下拉ID #namelist的jQuery函数：

$('#edituserModal').on('show.bs.modal', function (e) {
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 
});

上面的代码成功填充了HTML下拉列表，选择此处：

<select id="namelist">
</select>

以下是创建数据表的代码：

$('#datatable').DataTable({
    "searching": true,
    "paging": true,
    "serverSide": false,
    "type": "POST", 
    "ajax": {
        "url": "assets/process/getusers.php", 
        "dataSrc": ""
    },
    "columns": 
    [
        { "data": "null",
          "render": function ( data, type, row, meta )
          {
            return "<i class='far fa-edit editUser' 
                    title='Edit User' data-editdeptrepname='"+row.name+"'></i>";
          }
        },
        {"data": "username"},
        // few more columns
    ]
});

用户单击类为.editUser的图标。那个onClick事件在这里：

$('#datatable').on('click', 'tr > td > .editUser', function(e){
  e.preventDefault();
  var $dataTable = $('#datatable').DataTable();
  var tr = $(this).closest('tr');
  var rowData = $dataTable.row(tr).data();

  var name = $(this).attr('data-name');

  $('#namelist').val(name);
  // $('#namelist').val(rowData.name); // <-- I tried this
  // $('#namelist').val(rowData.name).text(rowData.name); // <-- also tried this
  // $('#namelist option:first').val(rowData.name).text(rowData.name);  // <-- this too
  // $('#namelist option:first').val(name); // <-- this as well

  $('#edituserModal').modal('show');
});

如上所述，下拉列表中填充了一个名称列表。当用户打开模式时，应该出现在下拉菜单中的名字应该是保存在数据库中的名字。

在模式中，问题是下拉列表最初没有显示保存在数据库中的名称。下拉列表仍会显示所有可选的名称选项，但这是最初显示在数据库中的名称。

正如您在最后一段代码中所看到的，我尝试了几种方法使其正常工作，但无济于事。

这是模式打开后下拉菜单的图片。它最初应读取当前保存在数据库中的名称。我可以单击下拉列表，它显示了完整的名称列表。但是我需要它来最初显示保存的名称：

我到底想念什么？我已经做过一百次了，直到现在，它从未让我失败。

Answer 1

这里是：

 $('#datatable').on('click', 'tr > td > .editUser', function(e){
    e.preventDefault();

    // Here is where sould go your initializeSelect call
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 

    var row = $(this).parent().parent();
    name = row[0].cells[0].innerText;
    $('#namelist option:first').val(name).text(name);

    $('#edituserModal').modal('show');
});

这样做，您就不再需要模态显示事件监听器。

希望这会有所帮助。

无法在下拉列表中填充数据库列

1 个答案: