Javascript 使用Ajax在Jade中添加下拉列表

我正在尝试将条目添加到我在.jade文件中定义的下拉列表中，如下所示

extends layout

block content
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='/javascripts/addsystem.js')
    h1= title
    p Testing


    select#allSystems

我的Ajax方法如下所示：

var select = $('#allSystems');
console.log("Runing script")


$.ajax({
  url: '/submit/getAllSystems',
  dataType:'JSON',
  success:function(data){

    $.each(test.system, function(key, val) {
        select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
    })
  }
});

---

知道我做错了什么吗？

Jade是一种模板语言，为了呈现HTML，必须对数据进行编译和执行。JQuery不会自动为您执行此操作，这就是您在select.append上被注释掉的尝试失败的原因

自己构建HTML是可行的，尽管它会生成一些难看的代码，而且我仍然不喜欢字符串连接。但是，当您这样做时，您更改为.appendTo，它将尝试获取您的select对象并将其附加到选项，我认为这不是您想要的

试一试：

select.append('<option id="' + val.id + '">' + val.name + '</option>');

---

这是jQuery在DOM完全加载后执行操作的方法的简写

抱歉，我包含了一个临时版本的代码，我只是测试随机的东西，因为我认为正确的东西不起作用。我已经编辑了我的帖子，当前版本似乎与您的建议相符，除非我遗漏了什么。我还将包括一些关于选择器的信息，因为这可能是您建议的问题。我很快会修改这个问题。不，你展示的看起来不错。从您的注释中假设测试对象有一个系统属性，该属性是对象的集合，那么循环应该可以工作。在ajax调用执行之后，您在DOM中看到了什么？你是否得到了格式错误的选项标签，空白标签，什么都没有？控制台中有错误吗？在控制台中，尝试使用您正在尝试的语法。例如，键入$'allSystems'。附加'testoption'并点击enter，然后观察这是否会更新您的DOM。如果不是，那么allSystems不是正确的ID。如果是，那么很可能您的数据结构与您期望的不一致，并且您没有注意到。我只是按照您在编辑答案时的建议，将脚本包括移到了块内容的底部。昨天我对DOM的东西感到困惑，因为我对web编程还不熟悉，所以不知道它是什么。然而，今天用新鲜的眼光看待它，一切都是有道理的。谢谢！你可以发布你的Jade文件或呈现的HTML吗？在DOM准备好之前你是否正在运行$'allSystems'？这就是我要添加到我的答案中的内容。迈克和保罗。我不知道。我怎么检查？我甚至不知道我是否在准备DOM。

select.append('<option id="' + val.id + '">' + val.name + '</option>');

$(function(){ /** your code **/ })