title: Getting text from asp.net dropdownlist which is populated with jquery
body: <p>I populated asp.net dropdownlists with jquery to show countries and cities. The dropdownlists show the correct value. I need to get the text of a ddlState at the backend of asp.net. However, I cannot get the selected text from the dropdownlist. It said it is null. </p>
  
  <p>Below is my script.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          GetCountries();
          GetStates();
  
      });
      function GetCountries() {
          $.ajax({
              type: "GET",
              url: "http://api.geonames.org/countryInfoJSON?formatted=true&amp;lang=en&amp;style=full&amp;username=xxx",
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp",
              success: function (data) {
                  $(".ddlCountry").append($('&lt;option /&gt;', { value: -1, text: 'Select Country' }));
                  $(data.geonames).each(function (index, item) {
                      $(".ddlCountry").append($('&lt;option /&gt;', { value: item.geonameId, text: item.countryName}));
                  });
              },
              error: function (data) {
                  alert("Failed to get countries.");
              }
          });
      }
  
      function GetStates() {
          $(".ddlCountry").change(function () {
              GetChildren($(this).val(), "States", $(".ddlState"));
          });
  
  
      }
  
  
      function GetChildren(geoNameId, childType, ddlSelector) {
          $.ajax({
              type: "GET",
              url: "http://api.geonames.org/childrenJSON?geonameId=" + geoNameId + "&amp;username=xxx",
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp",
              success: function (data) {
                  $(ddlSelector).empty();
                  $(ddlSelector).append($('&lt;option /&gt;', { value: -1, text: 'Select ' + childType }));
                  $(data.geonames).each(function (index, item) {
                      $(ddlSelector).append($('&lt;option /&gt;', { value: item.geonameId, text: item.name + "," + item.countryCode }));
                  });
              },
              error: function (data) {
                  alert("failed to get data");
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Below is the two dropdownlists that i have.</p>
  
  <pre><code> &lt;asp:DropDownList
                      runat="server"
                      ID="ddlCountry"
                      CssClass="ddlCountry"&gt;
                  &lt;/asp:DropDownList&gt;
                  &lt;br /&gt;
                  &lt;asp:DropDownList
                      runat="server"
                      ID="ddlState"
                      onChange="ddlState_OnChange"
                      CssClass="ddlState"&gt;
                  &lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>Can anybody help? Thank you.</p>