如何在DataTables中使用HTML中固定的下拉菜单？

Question

我关注此链接 ，现在对我有用。

但我想将时间列表移动到HTML标签而不是使用var times = ["12:00 am","1:00 am","2:00 am","3:00 am",... ]像这样：

<tbody>
  <tr>
      <td></td>          
      <td>
          <select id="timeSlots">
              <option value="12:00 am">12:00 am</option>
              <option value="1:00 am">1:00 am</option>
              <option value="2:00 am">2:00 am</option>
              <option value="3:00 am">3:00 am</option>
              <option value="4:00 am">4:00 am</option>
              ...
          </select>
      </td>
      <td>...</td>
  </tr>

在<script>标记中，如何从HTML调用该下拉列表并使用此函数处理相同的内容？

====编辑======

我想将<script>标记中的代码更改为以下内容：

"render": function(d, t, r) {
    $("#timeSlots option").each(function(e){
        var v = $(this).val();
        var $option = $("<option></option>", {
            "text": v,
            "value": v,
        });
        if(d === v){
            $option.attr("selected", "selected")
        };
    }); 
} 

任何人都可以帮我纠正这个功能吗？

谢谢你提前。

Answer 1

您可以迭代选择选项并像这样填充数组

$("#timeSlots option").each(function(e) {
  times.push($(this).val());
})

完整示例：

 var times = [ ]; $("#timeSlots option").each(function(e) { times.push($(this).val()); }) $(function() { $("#example").DataTable({ "columns": [ null, { "render": function(d, t, r) { var $select = $("<select></select>", { "id": r[0] + "start", "value": d }); $.each(times, function(k, v) { var $option = $("<option></option>", { "text": v, "value": v }); if (d === v) { $option.attr("selected", "selected") } $select.append($option); }); return $select.prop("outerHTML"); } }, { "render": function(d, t, r) { var $select = $("<select></select>", { "id": r[0] + "start", "value": d }); $.each(times, function(k, v) { var $option = $("<option></option>", { "text": v, "value": v }); if (d === v) { $option.attr("selected", "selected") } $select.append($option); }); return $select.prop("outerHTML"); } } ] }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" /> <select id="timeSlots"> <option value="12:00 am">12:00 am</option> <option value="1:00 am">1:00 am</option> <option value="2:00 am">2:00 am</option> <option value="3:00 am">3:00 am</option> <option value="4:00 am">4:00 am</option> </select> <table id="example"> <thead> <tr> <th>Day</th> <th>Start</th> <th>End</th> </tr> </thead> <tbody> <tr> <td>Monday</td> <td>8:00 am</td> <td>8:00 pm</td> </tr> <tr> <td>Tuesday</td> <td>7:00 am</td> <td>9:00 pm</td> </tr> <tr> <td>Wednesday</td> <td>8:00 am</td> <td>6:00 pm</td> </tr> <tr> <td>Thursday</td> <td>11:00 am</td> <td>7:00 pm</td> </tr> <tr> <td>Friday</td> <td>6:00 am</td> <td>1:00 pm</td> </tr> </tbody> </table>