从 select2 中的选定选项获取 optGroup id

Posted 2023-05-07

【中文标题】从 select2 中的选定选项获取 optGroup id

【英文标题】：Get optGroup id from selected option in select2

【发布时间】：2016-03-30 01:35:57

【问题描述】：

如何在选择子元素时从id 987654324 @ @ 987654324？ 例如，如果您有这种用于创建 select2 的 JSON：

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）

Jsfiddle

任何建议和指导如何解决这个问题？

【问题讨论】：

为此创建了小提琴：jsfiddle.net/Twisty/rfn5p18x

不清楚您要收集什么。您能否澄清一下您正在尝试做什么或完成更多工作。

对于选中的增强子 1 项，返回的数据是 id=c5 和 id=p0（正如我在主帖中描述的）

该事件没有返回父id，也不在代码中的optgroup标签中。目前尚不清楚这个值在哪里。查看测试：jsfiddle.net/Twisty/rfn5p18x/3

【参考方案1】：

根据我的研究，在进行选择时没有直接的方法来收集 optgroup id。这是生成的 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
  );
);

【讨论】：

这将完成这项工作，但它不是正确的做法。谢谢。

...好吧，正确的方法是什么？

正确的方法是从optgroup中获取，而不是在select中插入的每个项上设置（同一个optgroup下可以有很多项，并且相同的 id 将被重复，这不是正确的方式）

看看我在答案中的编辑。不容易获得，但有可能。

请注意，您可以使用.select2('data')（作为getter）获取选定的数据对象，而不必总是监听select2:select 事件。

【参考方案2】：

另一种简单的方法是将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>