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 "

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 "

• javascript
• jquery

• possible duplicate of jquery get selected text from dropdownlist – Naftali Commented May 5, 2011 at 18:19

5 Answers 5

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.

You have to reduce the selector to the selection option:

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

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 prehensive.)}

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

That will return the text of the selected option only

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