Посмотрев несколько постов, ни один из них не касается моей проблемы.
У меня есть скрипт, который динамически заполняет таблицу с помощью плагина dataTable.
В скрипте есть список выбора, который мне нужно заполнить результатами Ajax-вызова.
Если бы я использовал PHP, я знаю, как это сделать, но теперь я углубляюсь в Ajax, Jquery и dataTable, я застрял. В данный момент опция выбора для каждой строки данных отображает результат Ajax, но когда y = я пытаюсь выбрать другую опцию из выпадающего списка, он просто отображает список из 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");
});
Большое спасибо заранее за вашу помощь и время.