Как использовать фиксированное выпадающее меню из HTML в DataTables?

Question

Я перехожу по этой ссылке , и теперь она работает для меня.

Но я хочу переместить список times в тег HTML вместо использования var times = ["12:00 am","1:00 am","2:00 am","3:00 am",... ] какthis:

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