how to get the selected drop down value and text in controler

@using (Html.BeginForm( new {id="cf"}))
{
<div>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td><b>Select a District:</b>
<td><input type="hiden" name="countryname" id="hdnCountryName" /> </td>
</td>
            <td>@Html.DropDownListFor(m => m.countryId, ViewData["countries"] as IEnumerable<SelectListItem>, "Select One")</td>
        </tr>
      
    </table>
</div>
}

public ActionResult GetCountry( string countryname, string countryid)
  {
     //do action

      return View();
  }

<script type="text/javascript">
$('#countryId').on('change', function(event){
    var form = $("#cf");
$("#hdnCountryName").val($(this).text()) //selected text

    form.submit();
});

</script>