我在数据表中创建了动态下拉列表。有三个下拉列表，其中一个下拉列表由数据表外部的控件控制。我有其他两个下拉菜单的问题。我得到了与<select>绑定的值，但我无法显示所选值。这就是我尝试的方式：
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
MomActivity = $("#MomActivity").DataTable({
"sDom": "t",
"ajax":{
"url": "../api/momapi.php?action=getmombyid",
"type": "GET",
"data": {"MomID": <?php echo $_GET["MomID"]; ?>}
},
"destroy": true,
"ordering": false,
"columns": [
{
"title": "Project", "data": "projectid", "render": function(data, type, row){
myFunction(data , "Project_"+a);
return '<select class="form-control selectProjectID" id="Project_'+a+'" name="ProjectID[]" valueid="'+ data +'"></select>';
}
},
{
"title": "What", "data": "what", "render": function(data, type, row){
return '<input type="text" class="form-control" name="What[]" value="'+ data +'">';
}
},
{
"title": "For", "data": "momfor", "render": function(data, type, row){
var UserSide = "";
var CustomerSide = "";
if(data == "0"){
UserSide = 'checked="checked"';
CustomerSide = "";
} else if(data == "1") {
CustomerSide = 'checked="checked"';
UserSide = "";
}
return '<input type="radio" name="MomFor_'+b+'" class="MomFor" '+UserSide+' value="0"> For User Side     <input type="radio" class="MomFor" name="MomFor_'+b+'" '+CustomerSide+' value="1"> For Customer Side';
}
},
{
"title": "Who", "data": "who", "render": function(data, type, row){
return '<select class="form-control selectWho" name="Who_'+d+'" id="Who_'+c+'" valueid="'+ data +'">';
}
},
{
"title": "When", "data": "whentime", "render": function(data, type, row){
return '<input type="text" class="form-control whendate" name="When[]" value="'+ moment(data).format("DD-MM-YYYY") +'">';
}
},
{
"title": "Status", "data": "status", "render": function(data, type, row){
return '<select class="form-control status" valueid="'+ data +'" name="Status_'+e+'" disabled><option value="0"<?= $data->status == '0' ? 'selected="selected"' : ''; ?>>Not Started</option><option value="1"<?= $data->status == '1' ? 'selected="selected"' : ''; ?>>In Progress</option><option value="2"<?= $data->status == '2' ? 'selected="selected"' : ''; ?>>Hold</option><option value="3"<?= $data->status == '3' ? 'selected="selected"' : ''; ?>>Completed</option></select>';
}
},
{
"title": "...", "render": function(data, type, row){
return '<input type="button" class="btn btn-default btn-sm remove" value="Remove" name="remove" id="remove">';
}
}
],
"drawCallback": function(settings){
$(".selectProjectID").each(function(){
if($(this).find("option").length == 0){
$(this).fillSelect(projectid,"projectid","projectname",0,1).val($(this).attr("valueid"));
}
});
$(".selectWho").each(function(){
if($(this).find("option").length == 0){
console.log($(this).attr("id"));
console.log($(this).attr("valueid"));
$(this).val($(this).attr("valueid")).trigger("change");
}
});
$(".status").each(function(){
if($(this).find("option").length > 0){
console.log($(this).attr("valueid"));
$(this).val($(this).attr("valueid")).trigger("change");
}
});
$(".MomFor").each(function(){
if (!$(this).is(':checked') && $(this).val() == '0') {
var TaskStatus = $(this).parent().next('td').next('td').next('td').find('select');
TaskStatus.attr('disabled', 'disabled');
TaskStatus.val("0");
$(this).parent().next('td').find('select').removeAttr('disabled');
}
else if($(this).is(':checked') && $(this).val() == '1'){
var StaffSelect = $(this).parent().next('td').find('select');
StaffSelect.prop('disabled', true).val("");
$(this).parent().next('td').next('td').next('td').find('select').removeAttr('disabled');
}
});
},
"rowCallback": function( row, data, index ) {
$('td > input.remove', row).off("click").on("click",function(){
MomActivity.row($(this).parents('tr')).remove().draw();
});
$('td > input.whendate', row).datetimepicker({ format: "DD-MM-YYYY" });
$(".selectProjectID", row).on('change', function() {
myFunction(jQuery("#"+this.id).val(), this.id);
});
$(document).on("change", '.MomFor', function() {
//alert(this.value);
if ( $(this).val() == '0') {
//MyNotif.Show("Allot Thai Gayo Bhai", "success");
//$(".MomFor td:nth-child(4)").html();
//$(this).parent().next('td').next('td').next('td').find('select').attr('disabled', 'disabled');
var TaskStatus = $(this).parent().next('td').next('td').next('td').find('select');
TaskStatus.attr('disabled', 'disabled');
TaskStatus.val("0");
$(this).parent().next('td').find('select').removeAttr('disabled');
//$(this).parent().nextAll('td:2').css("background-color", "yellow");
}
else if ( $(this).val() == '1') {
//$(this).parent().next('td').find('select').attr('disabled', 'disabled');
var StaffSelect = $(this).parent().next('td').find('select');
StaffSelect.prop('disabled', true).val("");
$(this).parent().next('td').next('td').next('td').find('select').removeAttr('disabled');
//$(this).parent().next('td').find('select').attr('disabled', 'disabled');
}
});
$()
},
"fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
a = a + 1;
b = b + 1;
c = c + 1;
d = d + 1;
e = e + 1;
}
});
我得到了正确的控制台。它显示Who_0, 3, Who_1, 0。我想显示与值3关联的名称作为选中。与状态相似。
我可以在inspect元素中看到这个：
<select id="Who_0" class="form-control selectWho" name="Who_0" valueid="3"></select>
<select id="Who_1" class="form-control selectWho" name="Who_1" valueid="0"></select>
<select class="form-control status" valueid="0" name="Status_0"></select>
<select class="form-control status" valueid="3" name="Status_1"></select>
这是生成的选择：
<select id="Who_0" class="form-control selectWho" name="Who_0" valueid="3">
<option value="0">---Select---</option>
<option value="3">Yogeshwaran</option>
<option value="1">Samyuktha</option>
<option value="0">---Select---</option>
</select>
我还显示了生成的选择下拉列表。这是动态生成的。
但我不知道为什么它没有显示所选值？那么，如何显示所选值？我应该添加或更改什么？