Get optgroup label in a Bootstrap Select

Question

I have BootStrap select box and I am trying to find the optgroup of the selected option.

Here's a representation of a bootstrap select box with these options:

<li rel="1">
  <div class="div-contain">
     <div class="divider"></div>
  </div>
  <dt>
     <span class="text">Option Set 1</span> <!-- I NEED THIS: Option Set 1 -->
  </dt>
  <a tabindex="0" class="opt " style="">
    <span class="text">Option 1</span>
    <i class="fa fa-ok icon-ok check-mark"></i>
  </a>
</li>

<li rel="2" class="selected">
  <a tabindex="0" class="opt " style="">
    <span class="text">Option 2</span>
    <i class="fa fa-ok icon-ok check-mark"></i>
  </a>
</li>

EDIT: My recent try based on @Soren Beck Jensen answer:

$('i.check-mark').closest('li.selected').find('dt>span').text();

This gives me 'Option Set 1' for all and any options I select in the first dropdown.

Answer 1

I don't necessarily know that you need to go to the trouble of navigating the rendered bootstrap dom elements to get what you need. It seems much simpler to me to just access the original <select> markup.

jQuery(document).ready(function($){
    let picker = $('.selectpicker');
        picker.selectpicker();

    $(document).on('click', picker, function () {
        $('#group').html(
            $('option:selected', picker).parent('optgroup').prop('label') || 'no group'
        );
        $('#text').html(
            $('option:selected', picker).text()
        );
        $('#value').html(
            picker.val()
        );
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
    <optgroup label="A" >
        <option value="1">A - One</option>
        <option value="2">A - Two</option>
    </optgroup>
    <optgroup label="B">
        <option value="3">B - Three</option>
        <option value="4">B - Four</option>
    </optgroup>
    <option value="nothing">No Group</option>
    <optgroup label="C">
        <option value="5">C - Five</option>
    </optgroup>
</select>
<div>
  <div>
    Group: <span id="group"></span>
  </div>
  <div>
    Value: <span id="value"></span>
  </div>
    <div>
    Text: <span id="text"></span>
  </div>
  <div id="text"></div>
</div>

Answer 2

Currently your example is wrong, but try this:

$('li.selected').find('dt').find('span').text();