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>
</select>

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();
    alert(selectVal);
});

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

Comments

Kothawale
Reply

Hi rutter,
Thank you. Your tip helped me.
I am very new to web development!

Asif Tasleem
Reply

http://api.jquery.com/selected-selector/

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").

Silviu B.
Reply

Even better, use $(this).filter(":selected") in case you have multiple selects.

Bob
Reply

Thanks!!!!

eli
Reply

thank you

Uma
Reply

<html:select property = "activityId"
name="addDetailsForm"
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"/>
</logic:present>

</html:select>

HOw to get the selected value for this snippet

Leave a Reply