How To Get Value Of Select And Option Using jQuery

We can use jQuery to read the value of the select field and the text value of the selected option. This tutorial provides the code required to read either the select value or the text value of the selected option.

The Select HTML

We will use the select HTML as part of this tutorial as shown below.

<select id="sel-fruit" name="fruit">
	<option value="1009">Apple</option>
	<option value="1102">Banana</option>
	<option value="6120">Grapes</option>
	<option value="2908">Orange</option>
	<option value="2908">Water Caltrop</option>
	<option value="2912">Water Melon</option>
</select>

Read Select Value

We can get the select value using jQuery as shown below.

// Read the select value
var fruit = jQuery( "#sel-fruit" ).val();

// Log
if( window.console ) {
	console.log( "The value of select is:" + fruit );
}

The above code will print the numerical value 6120 in case Grapes is selected.

Read Selected Option Text

We can also get the selected option's text value using jQuery as shown below.

// Read the select value
var fruit = jQuery( "#sel-fruit option:selected" ).val();

// Log
if( window.console ) {
	console.log( "The text value of selected option is:" + fruit );
}

The above code will print the text value Grapes in case Grapes is selected.

This is how we can use jQuery to read or get the value of select and the text of the selected option.