如何从动态生成的选择选项中获得价值？

Question

I'm trying to get the value of a selected option that is dynamically generated. If I hard code the whole thing it works See fiddle . But dynamically nothing works. When I select the option nothing happens. What am I doing wrong?

markup

 <button type="button" id="connect" onclick="login();">
 <select id="pages" style="display:none;" onchange="getPage();"></select>

js

//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 < 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);
}

Answer 1

You may try to the following:

Replace

 pages[i] = new Option(response.data[i].name,response.data[i].access_token);

With

pages.options[pages.options.length]=new Option(response.data[i].name,response.data[i].access_token);

Answer 2

After several tests, turns out there is nothing wrong with the initial code. The problem was that I only had one option which couldn't fire the event. To solve that problem I added an empty option to the select.

Adding this did the trick:

  document.getElementById("pages").insertBefore(new Option('', ''), 
          document.getElementById("pages").firstChild);

For full answer see here