在jQuery/AJAX中动态填充的选择元素上选择一个选项 [英] Selecting an option on a dynamically-populated select element in jQuery/AJAX

问题描述

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

I have a dynamically-populated select box which is intended to be used for displaying information about a single option. The problem I've got is that it doesn't seem to fire a :selected event in the browser when I click on any of the options.

我将来不会知道什么信息，但是.val()(理论上)是否不应该获得已经动态填充的期权的价值?到目前为止，它似乎不起作用.

I won't know in the future what the information is, but shouldn't a .val() (in theory) get the value of the options which have been dynamically populated? So far it doesn't seem to be working.

原始HTML :

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

这些选项填充了以下 javascript (效果很好，JSON数据似乎很容易使用，我很高兴开始使用它):

The options are populated with the following javascript (and it works great, the JSON data seems to be a breeze to work with and I'm happy to start using it):

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，甚至将列表项放入全局数组变量中……似乎没有任何作用，而且我不确定为什么.

The problem is that I can't seem to grab the value of the selected option so that I can dynamically update other elements on the page. I've tried .val() and :selected and even putting the list items into a global array variable... nothing seems to be working, and I'm not really sure why.

当我检查浏览器中的元素(FF和Chrome)时，这些选项就在那里了，但是当我单击它们时，它们都没有选定的属性.该代码似乎不在乎是否选择了其中任何一个.在这种情况下，我将如何检测与列表的交互?

When I inspect the elements in the browser (FF and Chrome), the options are there, but none of them have a selected attribute when I click them. The code seems not to care whether any of them are selected or not. That being the case, how would I detect interaction with the list?

在检查器中，HTML类似于:

In the inspector the HTML looks something like:

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

为了将来参考(并提醒您)，我不一定要知道这些值.我想做的事甚至有可能吗?

For future reference (and as a reminder) I'm not going to necessarily know the values. Is what I want to do even possible?

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

The above function is called once each pageload from the $(document).ready(function(){} callback. If it matters, jQuery 1.11.1 is the version in use. The browsers are all fully up to date. I'm using Notepad++ for editing. Not sure what other info would be helpful.

推荐答案

动态替换select元素的HTML势必会引起问题.最好使用JavaScript本身，以使浏览器正确处理它. 单击此处查看操作方法

Replacing the HTML of a select element dynamically is bound to cause problems. It is best to use JavaScript itself in order to let the browser properly handle it. Click here to see how

这篇关于在jQuery/AJAX中动态填充的选择元素上选择一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！