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 thoughts on “jQuery Tips: How to get value of selected option in Select Box”

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

  2. <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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: