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

使用onclick事件，然后使用以下

获取所选值

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

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

Answer 2

动态替换select元素的HTML必然会导致问题。最好使用JavaScript本身，以便让浏览器正确处理它。 Click here to see how

Answer 3

首先，某些浏览器对填充.html(...)的选择节点反应不佳。附加选项节点会更安全。

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

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

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

3 个答案: