[英]Datatables - jQuery/Javascript dropdown box contains empty selector
I have made a dropdown filter for my datatable, as you can see in the jsfiddle ( https://jsfiddle.net/6k0bshb6/45/ ) there is an option which contains no data - if you look through inspect element <option value=""></option>
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. 我已经为我的数据表创建了一个下拉过滤器,正如您在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>')
});
});
}
});
I tried wrapping an if statement around the append like this... 我试图像这样将if语句围绕附加语句包装起来...
column.data().unique().sort().each(function (d, j) {
if (d !== undefined) {
select.append('<option value="' + d + '">' + d + '</option>')
}
});
but it didn't work for some reason. 但由于某种原因它没有起作用。
You could set the value of "Show All" like below. 您可以像下面那样设置“全部显示”的值。
<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>
And once the page load is complete, you could use JQuery to remove the empty drop down option. 页面加载完成后,您可以使用JQuery删除空的下拉选项。 The below option remove the dropdown item based on index 以下选项可根据索引删除下拉菜单项
$('.dropdown-filter-div option:eq(1)').remove()
or use the below JQuery, the below code removes the dropdown item based on value (which is empty in your code) 或使用下面的JQuery,下面的代码根据值删除下拉项(在代码中为空)
$('.dropdown-filter-div option[value=""]').remove()
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.