Search code examples
javascriptjqueryonclickdrop-down-menuselected

get seleceted dropdown option value jquery


I have two dropdowns -- for the month and year -- and a button. When the user clicks the button, I want to grab the selected month value and year value and pass them as query string to a URL like this: https://mysite.com/events.aspx?my=may2012.

How do I grab those values using jQuery or Javascript?

<div id="datepicker"></div>
<div class="calendForm">
    <span class="inpMonth">
        <select>
            <option selected="selected">September</option>
        <option>August</option>
        <option>July</option>
        <option>June</option>
        <option>May</option>
        <option>April</option>
        <option>March</option>
        <option>February</option>
        <option>January</option>
        <option>December</option>
        <option>November</option>
        <option>October</option>
        </select>
    </span>
    <span class="inpYear">
        <select>
            <option selected="selected">2012</option>
            <option>2013</option>
            <option>2014</option>
        <option>2015</option>
        </select>
    </span>
    <a href="#" type="submit" class="btnBlue"><span>GO</span></a>
</div><br />

Solution

  • There is a mistake in T. Stone's answer. the selector should have a dot. Other than that - great answer!

    See my fiddle

    <script>
    $(function(){$(".btnBlue").click(function(){
        window.location = "https://mysite.com/events.aspx?my=" + $(".inpMonth select").val().toLowerCase() + $(".inpYear select").val();
    })})
    </script>