Question

看过许多帖子，它们都没有解决我遇到的问题。

我有一个脚本，该脚本使用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");
});

在此先感谢您的帮助和时间。

Answer 1

此解决方案使用for来迭代所有选项。注意if条件，它是基于您的PHP代码的：

    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 >";

    for (var i=0; i<11; i++) {

      if (displayorder != i) {
        tr_str += "<option value='" + i + "'>" + i + "</option>";
      } else {
        tr_str += "<option selected='selected' value='" + i + "'>" + i + "</option>";
      }

    }

    tr_str += "</select> \
    </td>" +
    "</tr>";

使用dataTables用Ajax结果填充选择列表

1 个答案: