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

Question

我正在尝试获取动态生成的选定选项的值。 如果我对整个过程进行硬编码， 请参见小提琴 。 但实际上没有任何作用。 当我选择该选项时，什么也不会发生。 我究竟做错了什么？

标记

 <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

您可以尝试以下操作：

更换

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

用

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

Answer 2

经过几次测试，结果证明初始代码没有问题。 问题是我只有一个选项无法触发该事件。 为了解决该问题，我在选择中添加了一个空选项。

添加这个就可以了：

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

有关完整答案，请参见此处