How to collect selected dropdown text with Javascript DOM?

Question

Using Bootstrap 4 example html below, how can I extract the text from selected dropdown menu option with JS DOM or Jquery?

<select class="custom-select" id="inputGroupSelect01">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

I know that I can fetch the value but not the text within <option></option> with something like this:

$("#inputGroupSelect01").change(function (){

    alert($(this).val());
});

Let's assume the value is an ID and the text is a column in my database. I need to fetch this information to submit a PUT request with the ID and the text. Thanks for your help!

Answer 1

Simply add option:selected to your ID in jQuery:

$("#inputGroupSelect01").change(function (){
    alert($("#inputGroupSelect01 option:selected").text())
});