Question

我无法从我通过.val加载的选择列表中获取ajax。它似乎只给我第一个选项的值，无论我是否改变了选择本身。奇怪的是我在控制台中检查了$("select").val();和$("select").find(":selected");，并且所选的find返回一个数组，其中包含第一个项目和我当前选择的项目。所以似乎选择了新的并保留第一项，但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）任何帮助都将非常感谢。

Answer 1

根据您调用$（＆＃34; .statusChangeUsr＆＃34;）。val（）的位置，jQuery可能会查看最初在初始页面加载时生成的最初加载。然后，一旦你用AJAX改变任何值，jQuery仍然会查看最初加载到DOM中的原始$（＆＃34; .statusChangeUsr＆＃34;），而不是附加的$（＆＃34; .statusChangeUsr＆＃34 ;）当前显示。

每当我通过AJAX调用加载东西时，我要么使用匿名函数，要么直接将它放在$（document）.ready函数中。尝试：

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

获取通过ajax加载的选择列表的.value

1 个答案: