jQuery Tips: How to get value of selected option in Select Box

I recently had to pull together some jQuery to get the value of what was selected in a select box. Its pretty easy to do with jQuery. There are probably a few ways to accomplish this, I chose to use the change event which detects when something is changed.

Here is the html code for the select:

<select id="my_select" name="my_select_box">
<option value="yes">yes</option>
<option value="no">no</option>

And here is the jQuery snippet for getting the value of whichever you have selected:

$('#my_select').change(function() {
   // assign the value to a variable, so you can test to see if it is working
    var selectVal = $('#my_select :selected').val();

And there you have it, pretty simple! I will be posting more of these little helpful jQuery snippets. Stay Tuned!

6 replies on “jQuery Tips: How to get value of selected option in Select Box”

Additional Notes:

Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected").

<html:select property = "activityId"
style="width:200px;" styleClass="activity" styleId="activity">
<html:option value="0">Select Activity</html:option>

<logic:present property="activityList" name="addDetailsForm">
<bean:define name="addDetailsForm" property="activityList"
id="lstActivity" type="java.util.List"></bean:define>
<html:options collection="lstActivity" property="activityId"
labelProperty="activityName" labelName="activityID"/>


HOw to get the selected value for this snippet

Leave a Reply

Your email address will not be published. Required fields are marked *