EDIT: The HTML and js bellow is a simplified version. Check out the jsfiddle link on the bottom of my post for full demonstration of my problem.

I have a select HTML element:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

I want to get the label of a selected option with jQuery. This, however:

alert($("#foo option:selected").text());

Returns:

a
b
c

I want to get just, for example:

b

jsfiddle: / (click on the "Vybrať značku" button).

EDIT: The HTML and js bellow is a simplified version. Check out the jsfiddle link on the bottom of my post for full demonstration of my problem.

I have a select HTML element:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

I want to get the label of a selected option with jQuery. This, however:

alert($("#foo option:selected").text());

Returns:

a
b
c

I want to get just, for example:

b

jsfiddle: http://jsfiddle.net/8KcYY/1/ (click on the "Vybrať značku" button).

• javascript
• jquery

• Seems to work to me. Could you post a non-functional example on jsfiddle.net? – lonesomeday Commented Apr 15, 2011 at 11:34
• Strange, according to this documentation (api.jquery.com/selected-selector) it should work. – Kon Commented Apr 15, 2011 at 11:35
• Does this example not work? – Khez Commented Apr 15, 2011 at 11:38
• I have posted it to jsfiddle. – Richard Knop Commented Apr 15, 2011 at 11:43
• I modified it slightly, but works the same: jsfiddle.net/qtRhQ/1 – Kon Commented Apr 15, 2011 at 11:48

2 Answers 2

This works:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<input type="button" id="button" value="Button" />

$('#button').click(function() {
    alert($('#foo option:selected').text());
});

Try it yourself: http://jsfiddle.net/Nyenh/

Even simpler:

$('#foo').change(function(){
    var selected = $(this).find('option:selected');
    alert(selected.val() + ' ' + selected.text());
});

http://jsfiddle.net/qtRhQ/1/

 $("#dropdownlistID").text();

This will show all positions in your "dropdownlist". To get only selected item use:

 $("#dropdownlistID").val();

Or try like

 $("#foo").find(":selected").text()

instead of

$("#foo option:selected").text()