how do I get the text instead of the value

Question

I have this HTML:

<select class="business_types_select" name="business_type_id">
<option value="0" selected="selected">Select a Business Type</option>
     <option value="54">Bakery</option>
      <option value="55">Tobacco</option>
</select>

and if I select Bakery and then try:

 $(".business_types_select").val()

I get 54, but how do i get the text Bakery? If I try

 $(".business_types_select").text()

I get:

" Select a Business Type Bakery Tobacco "

Answer 1

Try:

$(".business_types_select :selected").text()

Without this, the .text() is behaving like it should, which is to bring back all of the text from that particular class. Adding :selected to the selector narrows it down to just the one you have selected.

Remember to cache your selectors if you're going to be operating on them often for performance.

Answer 2

You have to reduce the selector to the selection option:

$(".business_types_select").find('option:selected').text();

Answer 3

Like this:

$(".business_types_select > option:selected").text()

^{(In the short example here I have assumed that there is only one <select class="business_types_select" />. My jsfiddle example is more comprehensive.)}

Answer 4

$(".business_types_select option:selected").text()

That will return the text of the selected option only

Answer 5

$(".business_types_select").find('option:selected').text();