从 select2 中的选定选项获取 optGroup id
Get optGroup id from selected option in select2
如何在选择子元素时从 optgroup
获取 id
?
例如,如果您使用这种 JSON 来创建 select2
:
var data = [{
id: p0,
text: 'enhancement',
children: [{
id: c5,
text: 'enhancement child1'
},{
id: c6,
text: 'enhancement child2'
}]
},{
id: c1,
text: 'bug'
},{
id: c2,
text: 'duplicate'
},{
id: c3,
text: 'invalid'
},{
id: c4,
text: 'wontfix'
}];
并且使用$("#select2").val();
只会从选定的项目中检索id,那么可以通过哪种方式检索所有父optgroups
id? (对于选定的 enhancement child1
项,返回的数据是 id=c5
和 id=p0
)
有什么解决办法的建议和指示吗?
From my research, there is not a direct way to collect the optgroup
id when the a selection is made.Here is the resulting HTML:
<select class="js-example-data-array select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="enhancement">
<option value="c5">enhancement child1</option>
<option value="c6">enhancement child2</option>
</optgroup>
<option value="c1">bug</option>
<option value="c2">duplicate</option>
<option value="c3">invalid</option>
<option value="c4">wontfix</option>
</select>
编辑
经进一步检查,html body.forceShow select.js-example-data-array.select2-hidden-accessible optgroup
的 DOM 确实有 value
的 p0
。还在摸索如何根据具体的选择来收集这个。
您可以将此详细信息添加到数据中,然后将其取出。示例:https://jsfiddle.net/Twisty/rfn5p18x/4/
HTML
<select class="js-example-data-array">
</select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
<div id="results">
</div>
JQuery
var data = [{
id: 'p0',
text: 'enhancement',
children: [{
id: 'c5',
text: 'enhancement child1',
parent: 'p0'
}, {
id: 'c6',
text: 'enhancement child2',
parent: 'p0'
}]
}, {
id: 'c1',
text: 'bug'
}, {
id: 'c2',
text: 'duplicate'
}, {
id: 'c3',
text: 'invalid'
}, {
id: 'c4',
text: 'wontfix'
}];
$(document).ready(function() {
$(".js-example-data-array").select2({
data: data
});
$(".js-example-data-array").on("select2:select", function(e) {
if (e.params.data.parent.length) {
console.log(e.params.data.parent + " > " + e.params.data.id + " selected");
} else {
console.log(e.params.data.id + " selected");
}
});
$(".js-example-data-array-selected").select2({
data: data
});
});
您现在可以看到数据包含对父级的引用,现在可以在选择一个选项时访问。它在 .val()
下不可用,但您可以在选择时将其存放在其他地方或修改 .val()
以包含它。
编辑已修复
能够从 $("option:selected").parent("optgroup").val();
收集到 optgroup
id。工作示例:https://jsfiddle.net/Twisty/rfn5p18x/7/
JQuery
var data = [{
id: 'p0',
text: 'enhancement',
children: [{
id: 'c5',
text: 'enhancement child1',
}, {
id: 'c6',
text: 'enhancement child2',
}]
}, {
id: 'c1',
text: 'bug'
}, {
id: 'c2',
text: 'duplicate'
}, {
id: 'c3',
text: 'invalid'
}, {
id: 'c4',
text: 'wontfix'
}];
$(document).ready(function() {
$(".js-example-data-array").select2({
data: data
});
$(".js-example-data-array").on("select2:select", function(e) {
var pID = $("option:selected").parent("optgroup").val();
if (typeof pID !== "undefined") {
$("#results").append("Parent: " + pID + "<br />\r\n");
}
$("#results").append("Value: " + $(this).val() + "<br />\r\n");
});
$(".js-example-data-array-selected").select2({
data: data
});
});
另一种简单的方法是向子对象添加 extra field
并将 group id
存储在其中。
您可以通过e.params.data.extra
检索额外字段。
您可以根据需要命名字段。
示例如下:
const data = [
{
id: "gp1",
text: "group1",
children: [
{ id: "c1", text: " child1", extra: "gp1" },
{ id: "c2", text: " child2", extra: "gp1" },
],
},
{
id: "gp2",
text: "group2",
children: [
{ id: "c3", text: " child3", extra: "gp2" },
{ id: "c4", text: " child4", extra: "gp2" },
],
},
{
id: "c5",
text: "child5",
},
];
$("select").select2({
width: "80%",
data: data,
});
$("select").on("select2:select", function (e) {
console.log("group name:", e.params.data.extra);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
rel="stylesheet"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select multiple>
</select>
</body>
</html>
如何在选择子元素时从 optgroup
获取 id
?
例如,如果您使用这种 JSON 来创建 select2
:
var data = [{
id: p0,
text: 'enhancement',
children: [{
id: c5,
text: 'enhancement child1'
},{
id: c6,
text: 'enhancement child2'
}]
},{
id: c1,
text: 'bug'
},{
id: c2,
text: 'duplicate'
},{
id: c3,
text: 'invalid'
},{
id: c4,
text: 'wontfix'
}];
并且使用$("#select2").val();
只会从选定的项目中检索id,那么可以通过哪种方式检索所有父optgroups
id? (对于选定的 enhancement child1
项,返回的数据是 id=c5
和 id=p0
)
有什么解决办法的建议和指示吗?
From my research, there is not a direct way to collect the optgroup
id when the a selection is made.Here is the resulting HTML:
<select class="js-example-data-array select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="enhancement">
<option value="c5">enhancement child1</option>
<option value="c6">enhancement child2</option>
</optgroup>
<option value="c1">bug</option>
<option value="c2">duplicate</option>
<option value="c3">invalid</option>
<option value="c4">wontfix</option>
</select>
编辑
经进一步检查,html body.forceShow select.js-example-data-array.select2-hidden-accessible optgroup
的 DOM 确实有 value
的 p0
。还在摸索如何根据具体的选择来收集这个。
您可以将此详细信息添加到数据中,然后将其取出。示例:https://jsfiddle.net/Twisty/rfn5p18x/4/
HTML
<select class="js-example-data-array">
</select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
<div id="results">
</div>
JQuery
var data = [{
id: 'p0',
text: 'enhancement',
children: [{
id: 'c5',
text: 'enhancement child1',
parent: 'p0'
}, {
id: 'c6',
text: 'enhancement child2',
parent: 'p0'
}]
}, {
id: 'c1',
text: 'bug'
}, {
id: 'c2',
text: 'duplicate'
}, {
id: 'c3',
text: 'invalid'
}, {
id: 'c4',
text: 'wontfix'
}];
$(document).ready(function() {
$(".js-example-data-array").select2({
data: data
});
$(".js-example-data-array").on("select2:select", function(e) {
if (e.params.data.parent.length) {
console.log(e.params.data.parent + " > " + e.params.data.id + " selected");
} else {
console.log(e.params.data.id + " selected");
}
});
$(".js-example-data-array-selected").select2({
data: data
});
});
您现在可以看到数据包含对父级的引用,现在可以在选择一个选项时访问。它在 .val()
下不可用,但您可以在选择时将其存放在其他地方或修改 .val()
以包含它。
编辑已修复
能够从 $("option:selected").parent("optgroup").val();
收集到 optgroup
id。工作示例:https://jsfiddle.net/Twisty/rfn5p18x/7/
JQuery
var data = [{
id: 'p0',
text: 'enhancement',
children: [{
id: 'c5',
text: 'enhancement child1',
}, {
id: 'c6',
text: 'enhancement child2',
}]
}, {
id: 'c1',
text: 'bug'
}, {
id: 'c2',
text: 'duplicate'
}, {
id: 'c3',
text: 'invalid'
}, {
id: 'c4',
text: 'wontfix'
}];
$(document).ready(function() {
$(".js-example-data-array").select2({
data: data
});
$(".js-example-data-array").on("select2:select", function(e) {
var pID = $("option:selected").parent("optgroup").val();
if (typeof pID !== "undefined") {
$("#results").append("Parent: " + pID + "<br />\r\n");
}
$("#results").append("Value: " + $(this).val() + "<br />\r\n");
});
$(".js-example-data-array-selected").select2({
data: data
});
});
另一种简单的方法是向子对象添加 extra field
并将 group id
存储在其中。
您可以通过e.params.data.extra
检索额外字段。
您可以根据需要命名字段。
示例如下:
const data = [
{
id: "gp1",
text: "group1",
children: [
{ id: "c1", text: " child1", extra: "gp1" },
{ id: "c2", text: " child2", extra: "gp1" },
],
},
{
id: "gp2",
text: "group2",
children: [
{ id: "c3", text: " child3", extra: "gp2" },
{ id: "c4", text: " child4", extra: "gp2" },
],
},
{
id: "c5",
text: "child5",
},
];
$("select").select2({
width: "80%",
data: data,
});
$("select").on("select2:select", function (e) {
console.log("group name:", e.params.data.extra);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
rel="stylesheet"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select multiple>
</select>
</body>
</html>