在jQuery/AJAX中的动态填充select元素上选择一个选项

Question

我有一个动态填充的选择框，旨在用于显示有关单个选项的信息。我得到的问题是，当我点击任何选项时，似乎并没有在浏览器中触发一个:selected事件。

我将来不知道这些信息是什么，但不应该从.val()（理论上）得到已动态填充的选项的值？到目前为止，它似乎没有工作。

的原始的HTML：

<select id="activeList" size="5"> 
</select> 

的选项有以下的javascript填充（和它的伟大工程，JSON数据似乎是工作变得轻而易举，我很高兴开始使用它）：

function popuList(){ 
    // Populates the SELECT element with options from the JSON file. 
    var url = "/calls/sessions.php"; 
    var list = ''; 
    $.getJSON(url,'',function(jdata,oSucc,jqXHR){ 
     $.each(jdata,function(i,session){ 
      $.each(session,function(n,data){ 
       list += "\n" + '<option value="'+data.name+'">'+data.name+'</option>'; 
      }); 
     }); 
     $("#activeList").html(list); 
    }); 
} 

的问题是，我似乎不能抢所选选项的值，这样我可以动态更新页面上的其他元素。我试过.val()和:selected，甚至把列表项放入一个全局数组变量中......似乎没有任何工作，我不确定为什么。

当我检查浏览器中的元素（FF和Chrome）时，这些选项在那里，但是我点击它们时没有选择属性。代码似乎不关心他们是否被选中。既然如此，我如何检测与列表的交互？

在检查的HTML看起来像：

<select id="activeList" size="5"> 
    <option value="00000000003">00000000003</option> 
    <option value="00000000002">00000000002</option> 
    <option value="00000000001">00000000001</option> 
</select> 

以供将来参考（并作为提醒）我不打算一定知道的值。我甚至想做甚么？

上述功能从$(document).ready(function(){}回调中调用一次页面加载。如果很重要，jQuery 1.11.1是正在使用的版本。浏览器都是最新的。我正在使用Notepad ++进行编辑。不确定其他信息会有帮助。

Answer 1

更换选择元件动态势必引起问题的HTML。最好使用JavaScript本身来让浏览器正确处理它。 Click here to see how

Answer 2

使用onclick事件，然后通过使用获得的选定值以下

<select id="activeList" size="5" onclick='onclicklist()'> 
</select> 

<script> 
    function onclicklist() { 
     var selectedvalue = $("#activelist option:selected").val(); 
    } 
</script> 

Answer 3

首先，一些浏览器对使用.html(...)填充选择节点的响应不佳。追加选项节点要安全得多。

其次，要响应用户对填充选择元素的选择，您需要附加'onchange'处理程序。附件可以在添加选项之前或之后进行。

function popuList() { 
    var $select = $("#activeList").on('change', function() { 
     var val = this.value; 
     //do real kewl stuff with the value here 
    }); 
    // Populates the SELECT element with options from the JSON file. 
    var url = "/calls/sessions.php"; 
    $.getJSON(url, '', function(jdata, oSucc, jqXHR){ 
     $.each(jdata,function(i, session) { 
      $.each(session, function(n, data) { 
       $('<option value="' + data.name + '">' + data.name + '</option>').appendTo($select); 
      }); 
     }); 
    }); 
}