getting selected value from select list with jquery in mvc

How can I get the selected value from a drop down list in mvc from jquery to the controller.

View:

<tr><td>Choose League: </td><td><select name="leagueSelection" id="leagueIdDrop" class="dropdownlistLeagueStyle"><option value="1">Barclays Premier League</option><option value="6">Bundesliga</option><option value="7">Seria A</option><option value="8">Ligue 1</option><option value="9">La Liga</option><option value="10">Eredivisie</option></select></td><td><input id="leagueButton" class="loginButton" value="GetTeams" type="submit" /></td></tr>

I need to get the selected value so I can pass through the get teams method parameter

Solution

based on the name attribute of your select, you will want to have a parameter named "leagueSelection" in you controller's action. Assuming that your select is contained within a form element that posts to controller name/Submit.

public ActionResult Submit(int leagueSelection)
{
    // do what ever you want
}

you can also post with query string parameters

$.ajax({
  type: 'POST',
  url: '/controller/submit?leagueSelection=' + $('#leagueIdDrop').val()
});