获取通过 ajax 加载的选择列表的 .val答案

【问题标题】：getting .val of select list that is loaded on through ajax获取通过 ajax 加载的选择列表的 .val
【发布时间】：2014-07-25 09:50:45
【问题描述】：

我无法从通过ajax 加载的选择列表中获取.val。它似乎只给了我第一个选项的价值，不管我是否改变了选择本身。奇怪的是，我在控制台中检查了$("select").val(); 和$("select").find(":selected");，并且选择的查找返回一个数组，其中包含他的第一项和我当前选择的一项。所以似乎选择了新的并保留了第一项，但val 只是返回了第一项。

我三遍检查了我的文档，以确保其他地方没有其他文档，但确实没有。

这是我的代码：

在点击动作上附加我的选择框（和其他东西）

  var statusCheck = "<div class='confirmContainer' style='display:none;'><p class='confirmText'>Change Status of item(s).</p><select class='statusChangeUsr' name='statusHere'></select><button class='smallResultsButton submitStats'>Submit</button><button class='smallResultsButton cancelStats'>Cancel</button></div>";
            $(".actionsToolbar3").append(statusCheck);

然后在下次单击时将列表中的选项带入

 $.ajax(
             {
                 cache: false,
                 url : "/listUserStatuses",
                 type : "GET",
                  success:function(data, textStatus, jqXHR) {

                    $.each(data.statuses, function() {
                        $(".statusChangeUsr").append("<option value=" + this.id + " >" + this.name + "</option>");
                    });                         
                 },
                 error: function(jqXHR, textStatus, errorThrown)
                 {
                     alert("Error");
                 }
             });

然后在第三次单击中，我使用

从所选选项中获取值

  $(".statusChangeUsr").val();

问题是，它每次都返回 3（这是第一个选项的值）。如前所述，我注意到如果我将 $(".statusChangeUsr").find(":selected"); 放在开发人员控制台（chrome）中，我会得到以下信息 -

[<option value="3">Active</option>, <option value="5">On-Hold</option>]

值 3 是第一个项目，值 5 是实际选择的项目。最终目标是返回当前选定项目的值（在上述情况下为 5）任何帮助将不胜感激。

【问题讨论】：

您在代码中的哪个位置实际调用了 $(".statusChangeUsr").val()？在 $(document).ready 函数中？在通过 ajax 加载后调用的独立函数中？如果您在初始化期间 select 语句中只有 1 个选项，或者您在类实际更新之前调用该类，jQuery 将无法识别 ajax 加载的选项。
看起来就 jQuery 而言，两个选项都被选中，否则它只会在 find 调用中返回一个元素。

标签： jquery ajax

【解决方案1】：

根据您调用 $(".statusChangeUsr").val() 的位置，jQuery 可能会查看初始页面加载时最初生成的初始加载内容。然后，一旦您使用 AJAX 更改任何值，jQuery 仍会查看最初加载到 DOM 中的原始 $(".statusChangeUsr")，而不是当前显示的附加 $(".statusChangeUsr")。

每当我通过 AJAX 调用加载内容时，我要么使用匿名函数，要么将其直接放在 $(document).ready 函数中。试试：

$(document).ready(function(){
    $(document).on('change','.statusChangeUsr',function(){
      console.log($('option:selected',this));
    });
});

【讨论】：