Get selected option data using Jquery or javascript

Question

I have to get the selected option data whose option value is known. I have the selected option value and I want the data which is wrapped between the option.

For example in the following select:

<select name="oi_report_contact[sex]" id="oi_report_contact_sex">
       <option value="1">Male</option>
       <option value="2">Female</option>
       <option value="3">Other</option>
</select>

I have value 1, I need to get the data "Male" through Jquery or Javascript.

Please note : $('#oi_report_contact_sex').val(); will give 1 and not male, when 1 is selected.

Answer 1

You just have to call

var content = $('#oi_report_contact_sex option:selected').html();

to get the inner content of the selected option.

Answer 2

You can use .text() method to get the text value. Like this .

$('#oi_report_contact_sex').on('change', function () {
  alert($('#oi_report_contact_sex').val());
  alert($('#oi_report_contact_sex option:selected').text());
});

Answer 3

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

Answer 4

You can try:

$("#oi_report_contact_sex option[value='" + $("#oi_report_contact_sex").val() + "']").text()

jsFiddle link: http://jsfiddle.net/ARBb2/1/