数据表 - jQuery/Javascript 下拉框包含空选择器答案

【问题标题】：Datatables - jQuery/Javascript dropdown box contains empty selector数据表 - jQuery/Javascript 下拉框包含空选择器
【发布时间】：2016-05-31 07:37:08
【问题描述】：

我已经为我的数据表制作了一个下拉过滤器，正如您在 jsfiddle (https://jsfiddle.net/6k0bshb6/45/) 中看到的那样，有一个不包含数据的选项 - 如果您查看检查元素 <option value=""></option> 我如何删除这个空容器并告诉我的下拉框数据表函数在它们为空时跳过将选项附加到选择选项。

// 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 = $('<select><option value="">Show all</option></select>')
                    .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('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

我尝试像这样在 append 周围包裹一个 if 语句...

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

但由于某种原因它不起作用。

【问题讨论】：

d !== "" 而不是 undefined ？ jsfiddle.net/6k0bshb6/46
解决了，谢谢
根据 SO 政策将其添加为答案。如果有帮助请采纳。

标签： javascript jquery datatables

【解决方案1】：

使用d !== "" 而不是d !== undefined。见fiddle。

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

【讨论】：

【解决方案2】：

你可以这样修改

column.data().unique().sort().each(function (d, j) {
     d&&d.length&&select.append('<option value="' + d + '">' + d + '</option>')
});

我发现一行失去了它的价值，如下所示：

【讨论】：

我在 HTML 中删除了该值，这很有效，谢谢 :) j&& 做了什么你能解释一下吗？
其实这似乎破坏了功能
d&function(){} 等于 if (d) { select.append('<option value="' + d + '">' + d + '</option>')}

【解决方案3】：

您可以像下面这样设置“显示全部”的值。

<select><option value="Show All">Show all</option><option value=""></option><option value="Free Biscuits">Free Biscuits</option><option value="Free PS4">Free PS4</option><option value="Free TV">Free TV</option><option value="Free XBOX">Free XBOX</option></select>

一旦页面加载完成，您可以使用 JQuery 删除空下拉选项。以下选项根据索引删除下拉项

$('.dropdown-filter-div option:eq(1)').remove()

或使用下面的 JQuery，下面的代码会根据值删除下拉项（在您的代码中为空）

$('.dropdown-filter-div option[value=""]').remove()

希望这会有所帮助。

【讨论】：