title: Jquery to get SelectedText from dropdown
body: <p>I am trying to get the selected Text from the dropdownlist using Jquery.</p>
  
  <pre><code>&lt;div&gt;
      @Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one Country)")
  &lt;/div&gt;
  </code></pre>
  
  <p>Given below is the Jquery that I am using. But this is not working.
  I tried </p>
  
  <pre><code>var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text()); 
  </code></pre>
  
  <p>and is returning [object object]. But how to read the selected text?</p>
  
  <p>Next I tried  </p>
  
  <pre><code>var selectedText2 = $("#SelectedCountryId:selected").text();
  </code></pre>
  
  <p>Then it's returning empty.</p>
  
  <p>I also tried  </p>
  
  <pre><code>var selectedText2 = $("#SelectedCountryId option:selected").text();
  </code></pre>
  
  <p>This also returned empty.</p>
  
  <p>I am able to return the selectedID using</p>
  
  <pre><code>var selectedID = $("#SelectedCountryId").val();
  </code></pre>
  
  <p>But why not the selected text?</p>
  
  <p>Is there anything wrong with my Jquery here? Please help </p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#SelectedCountryId").change(function () {
  
                  var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text());
                  var selectedText2 = $("#SelectedCountryId:selected").text();
                  alert("You selected :" + selectedText1 + selectedText2 );
  
  
              });
  </code></pre>
  
  <p>This is the HTML for my dropdown  below</p>
  
  <pre><code>&lt;select id="SelectedCountryId" name="SelectedCountryId"&gt;&lt;option value=""&gt;(Select one Country)&lt;/option&gt;
  &lt;option value="19"&gt;USA&lt;/option&gt;
  &lt;option value="10"&gt;Germany&lt;/option&gt;
  &lt;option value="12"&gt;Australia&lt;/option&gt; &lt;/select&gt;
  </code></pre>