Question

我试图获取动态生成的所选选项的值。如果我对整个事情进行硬编码See fiddle。但动态无效。当我选择该选项时没有任何反应。我做错了什么？

标记

 <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

经过多次测试后，初始代码没有任何问题。问题是我只有一个选项无法触发事件。为了解决这个问题，我在select中添加了一个空选项。

添加此功能可以解决问题：

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

如需完整答案，请参阅here

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

2 个答案: