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

【问题标题】：How to use a fixed drop down menu from HTML in DataTables?如何在 DataTables 中使用 HTML 中的固定下拉菜单？
【发布时间】：2018-12-05 04:19:20
【问题描述】：

我关注了这个link，它现在对我有用。

但我想将 times 列表移动到 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 调用该下拉列表并使用此function 进行处理？

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

我想把<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")
        };
    }); 
}

谁能帮我改正这个函数？

感谢您的提前。

【问题讨论】：

你的意思是这样的？ jsfiddle.net/gcd05s1j
谢谢@Justcode。我的问题是正确的。但我希望有其他方法可以使代码更快。这是在 DataTables 中显示下拉菜单的最优化方式吗？
据我所知，没有性能问题，似乎是一种有效的方法。

标签： javascript jquery html datatables

【解决方案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>

【讨论】：