Jquery to get SelectedText from dropdown

Question

I am trying to get the selected Text from the dropdownlist using Jquery.

<div>     @Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one Country)") </div> 

Given below is the Jquery that I am using. But this is not working. I tried

var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text());  

and is returning [object object]. But how to read the selected text?

Next I tried

var selectedText2 = $("#SelectedCountryId:selected").text(); 

Then it's returning empty.

I also tried

var selectedText2 = $("#SelectedCountryId option:selected").text(); 

This also returned empty.

I am able to return the selectedID using

var selectedID = $("#SelectedCountryId").val(); 

But why not the selected text?

Is there anything wrong with my Jquery here? Please help

<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>     <script type="text/javascript">         $(document).ready(function () {             $("#SelectedCountryId").change(function () {                  var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text());                 var selectedText2 = $("#SelectedCountryId:selected").text();                 alert("You selected :" + selectedText1 + selectedText2 );               }); 

This is the HTML for my dropdown below

<select id="SelectedCountryId" name="SelectedCountryId"><option value="">(Select one Country)</option> <option value="19">USA</option> <option value="10">Germany</option> <option value="12">Australia</option> </select> 

Answer 1

I had the same problem yesterday :-)

$("#SelectedCountryId option:selected").text() 

I also read that this is slow, if you want to use it often you should probably use something else.

I don't know why yours is not working, this one is for me, maybe someone else can help...

Answer 2

Without dropdown ID:

$("#SelectedCountryId").change(function () {     $('option:selected', $(this)).text(); }