无法在下拉列表中填充数据库列
Cannot populate database column in dropdown
这个问题让我想起几年前我问的一个问题:
这是成功填充下拉列表 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:
<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
]
});
用户点击带有 class .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');
});
如上所述,下拉列表中填充了一个名称列表。当用户打开模式时,应该出现在下拉列表中的名字应该是数据库中保存的任何名称。
问题是,在模式中,下拉列表最初不显示数据库中保存的名称。下拉列表仍会显示所有 select 可用的名称选项,但最初应该显示的是保存在数据库中的名称。
正如您将在最后一段代码中看到的那样,我已经尝试了几种方法来使其工作,但都无济于事。
这是模式打开后下拉菜单的图片。它应该首先读取当前保存在数据库中的名称。我可以单击下拉菜单,它会显示完整的名称列表。但我需要它来初始显示保存的名称:
我到底错过了什么?我已经这样做了一百次,直到现在我都没有失败过。
这里是:
$('#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');
});
通过这样做,您不再需要模态显示事件侦听器。
希望对您有所帮助。
这个问题让我想起几年前我问的一个问题:
这是成功填充下拉列表 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:
<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
]
});
用户点击带有 class .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');
});
如上所述,下拉列表中填充了一个名称列表。当用户打开模式时,应该出现在下拉列表中的名字应该是数据库中保存的任何名称。
问题是,在模式中,下拉列表最初不显示数据库中保存的名称。下拉列表仍会显示所有 select 可用的名称选项,但最初应该显示的是保存在数据库中的名称。
正如您将在最后一段代码中看到的那样,我已经尝试了几种方法来使其工作,但都无济于事。
这是模式打开后下拉菜单的图片。它应该首先读取当前保存在数据库中的名称。我可以单击下拉菜单,它会显示完整的名称列表。但我需要它来初始显示保存的名称:
我到底错过了什么?我已经这样做了一百次,直到现在我都没有失败过。
这里是:
$('#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');
});
通过这样做,您不再需要模态显示事件侦听器。
希望对您有所帮助。