Get optGroup id from selected option in select2

Question

How can I get id from optgroup when child element is selected? For example if you have this kind of JSON used for creating 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' 
}];

And using $("#select2").val(); will only retrieve ids from selected items, so in which way all of the parents optgroups ids can be retrieved? (for selected enhancement child1 item, returned data is id=c5 and id=p0)

Jsfiddle

Any suggestion and directions how this can be solved?

Answer 1

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>

EDIT

Upon further inspection, the DOM for html body.forceShow select.js-example-data-array.select2-hidden-accessible optgroup does have a value of p0. Still trying to find out how to gather this based on the specific selection.

You can add this detail into the data and then you can get it out. Example: 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
  });
});

You can see now the data contains a reference to the parent and can now be accessed when an option is selected. It will not be available under .val() but you could deposit it elsewhere when selected or modify the .val() to include it.

EDIT FIXED

Was able to gather the optgroup id from $("option:selected").parent("optgroup").val();. Working example: 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
  });
});