title: Unable to set select selected value using jquery
body: <p>Here is my html code</p>
  
  <pre><code>&lt;select id="ddlCountry" placeholder="optional" class="select" title="Select Country"&gt;
   &lt;option value="0"&gt;Select Country&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here is the jquery code.....</p>
  
  <pre><code>$(document).ready(function () {
  
    $('select.select').each(function () {
      var title = $(this).attr('title');
      if ($('option:selected', this).val() != '') {
        title = $('option:selected', this).text();
        $(this)
          .css({
            'z-index': 10,
            'opacity': 0,
            '-khtml-appearance': 'none'
          })
          .after('&lt;span class="select"&gt;' + title + '&lt;/span&gt;')
          .change(function () {
            val = $('option:selected', this).text();
            $(this).next().text(val);
          })
      }
    });
  
  
    var country = [{
      "CountryID": 1,
      "CountryName": "Afghanistan"
    }, {
      "CountryID": 2,
      "CountryName": "Albania"
    }, {
      "CountryID": 3,
      "CountryName": "Algeria"
    }, {
      "CountryID": 4,
      "CountryName": "American Samoa"
    }, {
      "CountryID": 5,
      "CountryName": "Andorra"
    }, {
      "CountryID": 6,
      "CountryName": "Angola"
    }, {
      "CountryID": 7,
      "CountryName": "Anguilla"
    }, {
      "CountryID": 8,
      "CountryName": "Antarctica"
    }, {
      "CountryID": 9,
      "CountryName": "Antigua and Barbuda"
    }, {
      "CountryID": 10,
      "CountryName": "Argentina"
    }];
  
    $.each(country, function (index, item) {
      $('#ddlCountry').append($('&lt;option&gt;&lt;/option&gt;').val(item.CountryID).html(item.CountryName));
    });
  
    $('#ddlCountry').val(2);
  });
  </code></pre>
  
  <p>i have set the drop down value as 2 in ready but the default value is always the <code>Select Country</code></p>
  
  <p>Here is the <a href="http://jsfiddle.net/SjSVQ/1/" rel="nofollow">jsfiddle</a></p>