How to use a fixed drop down menu from HTML in DataTables?

Question

I following this link and it works for me now.

But I want to move the times list to HTML tag instead of using var times = ["12:00 am","1:00 am","2:00 am","3:00 am",... ]like 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>

And in the <script> tag, how can I call that drop-down list from HTML and handle the same with this function?

==== EDIT======

I want to change the code in <script> tag to something like this:

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

Can anyone help me correct this function?

Thanks for advance.

Answer 1

You can iterate over the select options and populate array like this

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

Full example:

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>