title: get selected item id from dynamically created dropdown list with jQuery
body: <p>My select element in my HTML is as below;</p>
  
  <pre><code>    &lt;select id="ddlCats"&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>I use jQuery to fill it on  <code>$(document).ready</code>: </p>
  
  <pre><code>// some ajax call
      $.each(msg.cats, function (i, cat) {
           $('#ddlCats').append(
      $('&lt;option&gt;&lt;/option&gt;').val(cat.catID).html(cat.catName)
      );
      });
  </code></pre>
  
  <p>this works fine and the list generates fine with:</p>
  
  <pre><code>&lt;select id="ddlCats"&gt;
     &lt;option value="68" selected="selected"&gt;option 1&lt;/option&gt;
     &lt;option value="59"&gt;option 2&lt;/option&gt;
     &lt;option value="60"&gt;option 3&lt;/option&gt;
     &lt;option value="62"&gt;option 4&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>until up to a point where I try to access the selected item's value with:</p>
  
  <pre><code>$('#ddlCats').val();
  </code></pre>
  
  <p>which always `returns 0. I also tried other avaliable selectors with no luck.</p>
  
  <p>any ideas?</p>