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:
[html]
<select id="my_select" name="my_select_box">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
[/html]

And here is the jQuery snippet for getting the value of whichever you have selected:
[js]
$(‘#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);
});
[/js]

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

Categories: jQuery

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

Kothawale · December 14, 2012 at 2:50 am

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

Asif Tasleem · February 12, 2013 at 3:48 am

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. · April 13, 2013 at 7:32 am

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

Bob · May 25, 2013 at 2:42 am

Thanks!!!!

eli · May 26, 2013 at 11:08 am

thank you

Uma · July 23, 2013 at 6:32 am

<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

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

Related Posts

eCommerce

Optimizely and jQuery – The new A/B Testing Platform

Being that I work in the eCommerce space, we talk a lot about A/B testing and it has also become a huge topic of conversation on the internet/twitter/facebook. Over the past two years, there have Read more…

HTML5

What are Web Hooks?

In an effort to push my skills front-end development with jQuery, I have began trying to learn more about Web Hooks. Web Hooks are essentially user-defined callbacks or events, which can be used in a Read more…

jQuery

Smashing jQuery – Working on Updated eBook.

Just wanted to let all my fans who have purchased Smashing jQuery that I’m currently working with my publisher, Wiley, to fix all of the code errors that are present in the book and we Read more…