get seleceted dropdown option value jquery

Question

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

Answer 1

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>

Answer 2

I'm assuming you want this all to happen on the click event of btnBlue.

Start with a click handler...

$('a.btnBlue').click(function() {
   // ...
});

Then get the values of the month/year...

var month = $('.inpMonth select').val();
var year = $('.inpYear select').val();

Then navigate to that URL...

window.location.href = 'https://mysite.com/events.aspx?my=' + month + year;

All together that's...

$('a.btnBlue').click(function() {
    var month = $('.inpMonth select').val();
    var year = $('.inpYear select').val();
    window.location.href = 'https://mysite.com/events.aspx?my=' + month + year;
});

Answer 3

To get the month try

$(".inpMonth select").val();

To parse a whole form give .serialize() and .serializeArray() a try

$("form").serialize()

Answer 4

first, get references to your SELECT and LINK dom objects:

var button = $('a.btnBlue');
var month = $('#datepicker .inpMonth select');
var year = $('#datepicker .inpYear select');

next, create a function to return the current month & year as a string:

function currentSelection() {
  return month.val() + year.val();
}

create a function which navigates you to the new url based on currentSelection():

function navigateToDate() {
  window.location.href = "https://mysite.com/events.aspx?my=" + currentSelection();
}

when the button is clicked, call navigateToDate():

button.click( navigateToDate );