将下拉菜单转换为 select2
Converting dropdown menu to select2
我正在尝试创建一个数据table,用户可以在其中使用下拉菜单过滤 table。第一个下拉菜单“project_select”填充了数据 table 列中的所有唯一值。第二个下拉菜单“hr_select”根据用户从“project_select”下拉菜单中的选择填充值。
目前,下拉菜单映射到 html 中的 span 元素。我希望将这些跨度元素转换为 select2。
这是我想要的 html 代码:
<label for="project_select"></label><select id="project_select" class="js-example-basic-single" style="width: 10%">
<option></option>
</select>
<label for="hr_select"></label><select id="hr_select" class="js-example-basic-multiple" multiple="multiple" style="width:15%">
<option></option>
</select>
但是,当我尝试用所需的 HTML 代码替换 span 元素时.. 它不起作用。
这是我的代码:https://jsfiddle.net/dfahsjdahfsudaf/nL6q21g9/16/
在此先感谢您的帮助!
我将我的评论转换为对这个问题的未来访问者的回答:
将标准选择转换为“Select2”选择所需的步骤是:
- 将所需的库添加到页面:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
- 为每个当前
<select>
元素指定 ID:
select = $('<select id="project_s2"><option value=""></option></select>');
和:
select = $('<select id="hr_s2" multiple><option value=""></option></select>');
- 使用这些 ID 初始化 Select2:
$('#project_s2').select2();
$('#hr_s2').select2();
最后的结果是:
var dataSet = [{
"Project_Name": "A",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "A",
"ID": "65",
"HR": "10",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "100",
},
];
$(document).ready(function() {
var table = $('#example').DataTable({
data: dataSet,
orderCellsTop: true,
columns: [{
data: "Project_Name"
},
{
data: "ID"
},
{
data: "HR"
}
],
initComplete: function() {
this.api().columns([0, 2]).every(function() {
var column = this;
var colIdx = column.index();
var node;
var select;
if (colIdx === 0) {
node = $('#project_select');
select = $('<select id="project_s2" style="width: 40%"><option value=""></option></select>');
} else {
node = $('#hr_select');
select = $('<select id="hr_s2" style="width: 20%" multiple><option value=""></option></select>');
}
select.appendTo($(node).empty())
.on('change', function() {
var val = $(this).val();
if (colIdx === 0) {
val = $.fn.dataTable.util.escapeRegex(val);
column.search(val ? '^' + val + '$' : '', true, false).draw();
rebuildPositionSelect();
} else {
var vals = val.map(x => $.fn.dataTable.util.escapeRegex(x)).join('|');
column.search(vals ? '^' + vals + '$' : '', true, false).draw();
}
});
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>')
});
});
$('#project_s2').select2();
$('#hr_s2').select2();
}
});
function rebuildPositionSelect() {
var select = $('#hr_select select').empty().append('<option value=""></option>');
var column = table.column(2, {
search: 'applied'
});
column.search('').draw();
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>');
});
}
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<div>
<span>Project: </span>
<span id="project_select"></span>
<span> HR: </span>
<span id="hr_select"></span>
</div>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Project_Name</th>
<th>ID</th>
<th>HR</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
如评论中所述,这是每个 Select2 下拉菜单的非常基本的设置。
要进一步自定义它们,您可以提供选项 - 例如:
$('#project_s2').select2( {
theme: "classic",
placeholder: 'Select an option'
} );
最后的注释:
上面例子中基本的<span>
元素的使用,只有极少的layout/styling可能不足以满足您的需要。因此,您可能希望提供 CSS 自定义以提供更好的整体布局。但这些更改不应影响您的 Select2 元素。
例如,添加 style="width: 40%"
(如上所示)会有所不同 - 但在您的特定情况下,这可能不是您想要的。
我正在尝试创建一个数据table,用户可以在其中使用下拉菜单过滤 table。第一个下拉菜单“project_select”填充了数据 table 列中的所有唯一值。第二个下拉菜单“hr_select”根据用户从“project_select”下拉菜单中的选择填充值。
目前,下拉菜单映射到 html 中的 span 元素。我希望将这些跨度元素转换为 select2。
这是我想要的 html 代码:
<label for="project_select"></label><select id="project_select" class="js-example-basic-single" style="width: 10%">
<option></option>
</select>
<label for="hr_select"></label><select id="hr_select" class="js-example-basic-multiple" multiple="multiple" style="width:15%">
<option></option>
</select>
但是,当我尝试用所需的 HTML 代码替换 span 元素时.. 它不起作用。
这是我的代码:https://jsfiddle.net/dfahsjdahfsudaf/nL6q21g9/16/
在此先感谢您的帮助!
我将我的评论转换为对这个问题的未来访问者的回答:
将标准选择转换为“Select2”选择所需的步骤是:
- 将所需的库添加到页面:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
- 为每个当前
<select>
元素指定 ID:
select = $('<select id="project_s2"><option value=""></option></select>');
和:
select = $('<select id="hr_s2" multiple><option value=""></option></select>');
- 使用这些 ID 初始化 Select2:
$('#project_s2').select2();
$('#hr_s2').select2();
最后的结果是:
var dataSet = [{
"Project_Name": "A",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "A",
"ID": "65",
"HR": "10",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "100",
},
];
$(document).ready(function() {
var table = $('#example').DataTable({
data: dataSet,
orderCellsTop: true,
columns: [{
data: "Project_Name"
},
{
data: "ID"
},
{
data: "HR"
}
],
initComplete: function() {
this.api().columns([0, 2]).every(function() {
var column = this;
var colIdx = column.index();
var node;
var select;
if (colIdx === 0) {
node = $('#project_select');
select = $('<select id="project_s2" style="width: 40%"><option value=""></option></select>');
} else {
node = $('#hr_select');
select = $('<select id="hr_s2" style="width: 20%" multiple><option value=""></option></select>');
}
select.appendTo($(node).empty())
.on('change', function() {
var val = $(this).val();
if (colIdx === 0) {
val = $.fn.dataTable.util.escapeRegex(val);
column.search(val ? '^' + val + '$' : '', true, false).draw();
rebuildPositionSelect();
} else {
var vals = val.map(x => $.fn.dataTable.util.escapeRegex(x)).join('|');
column.search(vals ? '^' + vals + '$' : '', true, false).draw();
}
});
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>')
});
});
$('#project_s2').select2();
$('#hr_s2').select2();
}
});
function rebuildPositionSelect() {
var select = $('#hr_select select').empty().append('<option value=""></option>');
var column = table.column(2, {
search: 'applied'
});
column.search('').draw();
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>');
});
}
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<div>
<span>Project: </span>
<span id="project_select"></span>
<span> HR: </span>
<span id="hr_select"></span>
</div>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Project_Name</th>
<th>ID</th>
<th>HR</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
如评论中所述,这是每个 Select2 下拉菜单的非常基本的设置。
要进一步自定义它们,您可以提供选项 - 例如:
$('#project_s2').select2( {
theme: "classic",
placeholder: 'Select an option'
} );
最后的注释:
上面例子中基本的<span>
元素的使用,只有极少的layout/styling可能不足以满足您的需要。因此,您可能希望提供 CSS 自定义以提供更好的整体布局。但这些更改不应影响您的 Select2 元素。
例如,添加 style="width: 40%"
(如上所示)会有所不同 - 但在您的特定情况下,这可能不是您想要的。