How to get value of data-subtext from Bootstrap Selectpicker?

Question

I'm using Bootstrap-Select in my project and I'm running into issues where I can retrieve the selected value but cannot figure out how to retrieve the sub-text of that value. Let's use this dropdown for an example:

<select class="selectpicker" id="condimentPicker">
  <option data-subtext="Heinz">Ketchup</option>
  <option data-subtext="French's">Mustard</option>
  <option data-subtext="Hellmans">Mayo</option>
</select>

Let's assume that Ketchup is selected

In order to get the selected value of this dropdown, one would use var selectedItem = $('#condimentPicker').val(); . In this case, selectedItem = "Ketchup" , however I would want selectedItem = "Heinz" . Any idea how to do this? I've search through the documentation and couldn't seem to find anything:(

Answer 1

Found an answer. data-subtext is just a custom attribute, so you can do the following to fetch that value:

var selectedItem = $("#condimentPicker option:selected").attr("data-subtext");