Dropdown select lists are a great tool in your HTML form arsenal, consisting of outer <select> tags which contain any number of <option> tags that make up the list options. Of course we all know that the value of an option doesn’t have to match what is displayed for that option, which leads us straight into today’s tip to retrieve the currently selected text string instead of the value.
The val() method in jQuery would return us the option’s value, meaning that in order to grab the text of an option, we would have to turn to the jQuery text() method.
Knowing this, the next part of this puzzle is to located the option which happens to be currently selected – and for that jQuery provides the very useful :selected selector.
The :selected selector selects all elements that are currently selected in a dropdown list, working on option tags. This means that while it will work on select boxes, it won’t function on checkboxes or radio buttons as those inputs use :checked.
So in practice, to get the text string for the currently selected option in a select dropdown list looks like this: