Question

我试图将条目添加到我在.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>'); 
    })
  }
});

Ajax脚本位于Jade文件中包含的JS文件中。（Jquery也包含在Jade文件中）。

除了追加之外，一切似乎都运转良好。即控制台日志一直显示良好的数据，当在Ajax脚本中打印选择对象时，浏览器将其识别为HTML元素。

打印正在运行的＆＃34; console.log（select）;＆＃34;时，Firefox控制台显示以下内容：

Object { context: HTMLDocument → submit, selector: "#allSystems" }

知道我做错了吗？

Answer 1

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

自己构建HTML有效（虽然它会产生一些丑陋的代码，但我仍然不喜欢字符串连接）。但是，当你这样做时，你改为.appendTo，这将尝试拿走你的select对象并将其附加到option，我认为这不是你想要的。

试一试：

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

如果这不起作用，那么你的选择器会有一些东西可以获得select变量。

*编辑* 我在你的Jade中注意到你在DOM的其余部分之前加载你的脚本。如果addsystem.js的内容与您描述的一样，那么您将获取数据并尝试将其附加到尚不存在的DOM节点。尝试包装它：

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

在完全加载DOM之后，这是jQuery的方法的缩写。

使用Ajax附加到Jade的下拉列表中

1 个答案: