我使用以下代码动态填充两个下拉菜单“searchproject”和“searchhr”。用户可以从“searchproject”中选择一个值,从“searchhr”中选择多个值来过滤数据表。
我试图让第二个下拉菜单“searchhr”根据第一个下拉菜单“searchproject”中选择的单个值填充值。
这是我当前的代码:
var sortFunction = function (a, b) {
if (a < b) return -1;
if (a > b) return 1;
return 0;
};
$(document).ready(function () {
var ex_table = $('#data_table').DataTable({
"order": [],
pageLength: 50,
ajax: {
url: '/db',
dataSrc: "",
type: "POST",
'data': function (d) {
return $.extend({}, d, {
"project_name": $('#searchProject').val(),
"hour": $('#searchHR').val(),
});
},
"serverSide": true,
},
columns: [
{data: 'project_name'},
{data: 'id'},
{data: 'hour'},
],
"initComplete": function () {
ex_table.columns([0]).every(function () {
const column = this;
const select = $('#searchProject')
.on('change', function () {
const Project_val = $(this).val();
column.search(Project_val).draw();
});
column.data().unique().sort().each(function (d) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
ex_table.columns([2]).every(function () {
const column = this;
const select = $('#searchHR')
.on('change', function () {
var vals = $('option:selected', this).map(function (index, element) {
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();
});
column.data().unique().sort(sortFunction).each(function (d) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
})
html:
<label for="searchProject"></label><select id="searchProject" class="js-example-basic-single" style="width: 10%">
<option></option>
</select>
<label for="searchHR"></label><select id="searchHR" class="js-example-basic-multiple" multiple="multiple" style="width:15%">
<option></option>
</select>
任何帮助都将不胜感激。谢谢
1条答案
按热度按时间yrwegjxp1#
这里有一种方法——我对代码进行了注解,以提供对主要步骤的解释。大部分复杂性来自(a)管理两个选择小部件之间的关系,以及(b)处理来自multi-select的值数组。
一些注意事项:
用户界面可以改进!“选择”下拉列表和“多重选择”没有任何样式/定位css。
由于从第一个(“办公室”)下拉列表到第二个(“职位”)多选列表之间存在依赖关系,因此每当我们对第一个下拉列表进行更改时,必须清除所有多选列表。如果不这样做,您可能会得到与所选下拉列表不相关的多选值。
代码可以(也可能应该)重新安排成一个更好的组织结构。目前,我的大部分代码都被转储到
initComplete
功能。(我个人的偏好是通常避免这种类型的选择依赖,因为这可能会让用户感到惊讶。)