Datatables - jQuery/Javascript dropdown box contains empty selector
<p>I have made a dropdown filter for my datatable, as you can see in the jsfiddle (<a href="https://jsfiddle.net/6k0bshb6/45/" rel="nofollow">https://jsfiddle.net/6k0bshb6/45/</a>) there is an option which contains no data - if you look through inspect element <code>&lt;option value=""&gt;&lt;/option&gt;</code> how can I remove this empty container and tell my datatable function for dropdown boxes to skip appending options to the select option when they are empty.</p>

<pre><code>// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('&lt;select&gt;&lt;option value=""&gt;Show all&lt;/option&gt;&lt;/select&gt;')
                    .appendTo($("#contracts_control-panel").find("div").eq(1)) // append dropdown to div 2 in control panel
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                        dataTable.page.len(5).draw(); //reset pagination after dropdown filter change.
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('&lt;option value="' + d + '"&gt;' + d + '&lt;/option&gt;')
                });
            });
        }
    });
</code></pre>

<p>I tried wrapping an if statement around the append like this...</p>

<pre><code>column.data().unique().sort().each(function (d, j) {
      if (d !== undefined) {
                select.append('&lt;option value="' + d + '"&gt;' + d + '&lt;/option&gt;')
      }
            });
</code></pre>

<p>but it didn't work for some reason.</p>