Checking to see what item is selected in an HTML select list via jQuery

Question

How do I get the actual value (or text) of the item selected in an HTML select box? Here are the main methods I've tried...

document.getElementById('PlaceNames').value

$("#PlaceNames option:selected").val()

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

And I've tried various variations on these. All I ultimately want to do is get that data and send it to a web service via AJAX, I just need the string representation of what the user selected. This seems like it should be really easy and I've even found a question similar to this here, but I'm still having issues getting it worked out. Google doesn't seem to be helping either. I feel like it must be due to some fundamental misunderstanding of Javascript and jQuery.

EDIT: I should mention that I'm using IE7

Answer 1

var plid = $('#PlaceNames').val();

val placename = $('#PlaceNames option[value=\''+plid.toString()+'\']').html();

Answer 2

Non-jQuery variant:

var select = document.getElementById('PlaceNames');
var value = select.options[select.selectedIndex].value;

Older jQuery variant:

var select = $('#PlaceNames:first')[0];
var value = select.options[select.selectedIndex].value;

Current jQuery variant:

var value = $('#PlaceNames:first').val();

I'm probably just being overly safe using :first.

Answer 3

$('#placeNames').val() returns the value of the selected option in the latest version of jQuery.