jQuery datatable - Select list within column
<p>I am currently pulling data in a jQuery datatable which is grand! But I am having an issue with the Role column.</p>

<p>I am trying to inset a select list in that column which will have two options "admin" &amp; "User" and whatever data is in the array set that value within the select list.</p>

<p>But I haven't been able to render select list into the table then set it to admin or user based on whats in the array.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($) {
  var data = [
    ["test1", "admin", "yes"],
    ["test2", "admin", "yes"],
    ["test3", "user", "no"],
    ["test4", "user", "no"]
  ]

  function authusers() {
    t = $('#authTable').DataTable({
      retrieve: true,
      paging: false,
      data: data,
      columns: [{
        "title": "Email",
        "render": function(data, type, row, meta) {
          return row[0];
        }
      }, {
        "title": "Role",
        "render": function(data, type, row, meta) {
          return row[1];
        }
      }, {
        "title": "Active",
        "render": function(data, type, row, meta) {
          var checkbox = $("&lt;input/&gt;", {
            "type": "checkbox"
          });
          checkbox.attr("checked", (row[2] === "yes"));
          checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked")
          return checkbox.prop("outerHTML")
        }
      }, ],
      order: []
    });
  }

  //Passes value and if it was enabled or disabled value to serverside.
  $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() {
    if ($(this).is(':checked')) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'yes';
    } else if ($(this).prop('checked', false)) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'no';
    }
  });
  authusers();
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdn.datatables.net/1.10.11/css/jQuery.dataTables.min.css" rel="stylesheet" /&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;table class="display" id="authTable" width="60%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;Active&lt;/th&gt;
        &lt;th&gt;Role&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>And also a <a href="https://jsfiddle.net/fjxbz50w/3/" rel="nofollow">JSfiddle</a></p>

<p>Any advice or recommendations are welcome!</p>