javascript - 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 :(

question from:https://stackoverflow.com/questions/65910597/how-to-get-value-of-data-subtext-from-bootstrap-selectpicker

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");