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

Question

如果选择子元素，如何从id获取optgroup？ 例如，如果您有这种用于创建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

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

Answer 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()以包含它。

修改编辑

能够从optgroup收集$("option:selected").parent("optgroup").val();个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
  });
});