title: How can I get value from dynamically generated select options?
body: <p>I'm trying to get the value of a selected option that is dynamically generated. If I hard code the whole thing it works  <a href="http://jsfiddle.net/G7uQZ/44/" rel="nofollow noreferrer">See fiddle</a>. But dynamically nothing works. When I select the option nothing happens. What am I doing wrong?</p>
  
  <p><strong>markup</strong></p>
  
  <pre><code> &lt;button type="button" id="connect" onclick="login();"&gt;
   &lt;select id="pages" style="display:none;" onchange="getPage();"&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>//open login dialog onClick
  function login() {  
  FB.login(function(){
    FB.api('/me/accounts/',  function(response) {
              var pages = document.getElementById('pages');
              pages.style.display = 'block';
              document.getElementById("connect").style.display="none";
              for(var i =0; i &lt; response.data.length; i++)
              {
                pages[i] = new Option(response.data[i].name,response.data[i].access_token);
              }
  
            }
          );
  
  }, {scope: 'manage_pages'});
  }
  
  function getPage(){
      var e = document.getElementById("pages");
      var f = e.options[e.selectedIndex].value;    
      alert(f);
  }
  </code></pre>