【发布时间】：2019-04-02 09:15:43
【问题描述】：
看了很多帖子，都没有解决我遇到的问题。
我有一个使用 dataTable 插件动态填充表格的脚本。 该脚本有一个选择列表，我需要用 Ajax 调用的结果填充该列表。
如果我使用的是 PHP，我知道该怎么做，但现在我正在尝试使用 Ajax、Jquery 和 dataTable，但我被困住了。目前，每行数据的选择选项显示 Ajax 结果，但是当 y=I 尝试从下拉列表中选择另一个选项时，它只显示每行的 1 或 2 的列表，依此类推。
在 PHP 世界中，我会运行 MySQL 查询来获取数据，然后填充选择列表，如下所示：
<select name="ViewOrder id="ViewOrder">
<option value="01" <?php if (!(strcmp("01", $DisplayOrder))) {echo "selected=\"selected\"";} ?>>01</option>
<option value="02" <?php if (!(strcmp("02", $DisplayOrder)e))) {echo "selected=\"selected\"";} ?>>02</option>
<option value="03" <?php if (!(strcmp("03", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>03</option>
<option value="04" <?php if (!(strcmp("04", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>04</option>
<option value="05" <?php if (!(strcmp("05", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>05</option>
<option value="06" <?php if (!(strcmp("06", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>06</option>
<option value="07" <?php if (!(strcmp("07", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>07</option>
<option value="08" <?php if (!(strcmp("08", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>08</option>
<option value="09" <?php if (!(strcmp("09", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>09</option>
<option value="10" <?php if (!(strcmp("10", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>10</option>
</select>
在使用 DataTable 动态创建表的世界中，我有这个，“displayorder”包含返回的每条记录的 ajax 结果。：
<select name='ViewOrder' id='ViewOrder' class='selectgroup' style='color:#333;font-size:0.9em;'required > \
<option value='0'>" + displayorder + "</option> \
<option value='1'>" + displayorder + "</option> \
<option value='2'>" + displayorder + "</option> \
<option value='3'>" + displayorder + "</option> \
<option value='4'>" + displayorder + "</option> \
<option value='5'>" + displayorder + "</option> \
<option value='6'>" + displayorder + "</option> \
<option value='7'>" + displayorder + "</option> \
<option value='8'>" + displayorder + "</option> \
<option value='9'>" + displayorder + "</option> \
<option value='10'>" + displayorder + "</option> \
</select> \
如何使用我的 Ajax 结果中的数据填充选择列表以显示为默认值并同时显示可选选项。
我完整的 JavaScript 代码是：
$(document).on('click','#view-order', function(event){
var group_id = document.getElementById("ViewCarouselID").value;
$.ajax({
url:"get_group_order.php",
method:"GET",
data:{group_id:group_id},
dataType: "Json",
success: function(response){
var len = response.length;
$("#orderTable tbody").html("");
for(var i=0; i<len; i++){
$('#OrderRecordID').val(recordid);
var record_id = response[i].RecordID;
var promotionimage = response[i].PromotionImage;
var groupid = response[i].GroupID;
$('#OrderGroupID').val(groupid);
var displayorder= response[i].DisplayOrder;
var orientation = response[i].Orientation;
if(orientation == 'L'){
orientation = 'Landscape';
} else {
orientation = 'Portrait';
}
$('#Orientation').val(orientation);
var imagecount = response[i].Totalcount;
$('#ImageCount').val(imagecount);
var displayorder = response[i].DisplayOrder;
var day1 = response[i].Day1;
if(day1 == 'n'){
var Day1 = ' - ';
} else {
var Day1 = 'M';
}
var day2 = response[i].Day2;
if(day2 == 'n'){
var Day2 = ' - ';
} else {
var Day2 = 'T';
}
var day3 = response[i].Day3;
if(day3 == 'n'){
var Day3 = ' - ';
} else {
var Day3 = 'W';
}
var day4 = response[i].Day4;
if(day4 == 'n'){
var Day4 = ' - ';
} else {
var Day4 = 'T';
}
var day5 = response[i].Day5;
if(day5 == 'n'){
var Day5 = ' - ';
} else {
var Day5 = 'F';
}
var day6 = response[i].Day6;
if(day6 == 'n'){
var Day6 = ' - ';
} else {
var Day6 = 'S';
}
var day7 = response[i].Day7;
if( day7 == 'n' ) {
var Day7 = ' - ';
} else {
var Day7 = 'S';
}
var tr_str = "<tr class='TableText'>" +
"<td style='color:#333;font-size:0.8em;white-space: nowrap;'> \
<input type='hidden' name='id[]' value='" + record_id + "'></td>" +
"<td style='color:#333;font-size:0.8em;white-space: nowrap;'>" + promotionimage + "</td>" +
"<td style='color:#333;width:9px;height:9px'><input name='view' type='image' src='../img/view_image.png' id=" + record_id + " class='btn btn-xs btn-block single-preview'></td>" +
"<td align='center' style='color:#333;font-size:0.8em;'>" + Day1 + '' + Day2 + '' + Day3 + '' + Day4 + '' + Day5 + '' + Day6 + '' + Day7 + "</td>" +
"<td align='center' style='color:#333;font-size:0.8em;'>" + displayorder + "</td>" +
"<td align='center' style='color:#333;font-size:0.8em;'> \
<select name='ViewOrder' id='ViewOrder' class='selectgroup' style='color:#333;font-size:0.9em;'required > \
<option value='0'>" + displayorder + "></option> \
<option value='1'>" + displayorder + "></option> \
<option value='2'>" + displayorder + "></option> \
<option value='3'>" + displayorder + "</option> \
<option value='4'>" + displayorder + "</option> \
<option value='5'>" + displayorder + "</option> \
<option value='6'>" + displayorder + "</option> \
<option value='7'>" + displayorder + "</option> \
<option value='8'>" + displayorder + "</option> \
<option value='9'>" + displayorder + "</option> \
<option value='10'>" + displayorder + "</option> \
</select> \
</td>" +
"</tr>";
$("#orderTable tbody").append(tr_str);
}
}
});
$('#view_order_Modal').modal("show");
});
非常感谢您的帮助和时间。
【问题讨论】：
-
请分享您的javascript代码
-
@GrafiCode Studio 我已按要求插入了所有 JavaScript。