如何在jade模板引擎中使用ajax填充下拉列表?

时间:2017-07-22 14:29:42

标签: javascript node.js ajax express pug

我需要填写关于选择其他下拉列表的下拉列表。

这是我的代码,

script.
var b_name = [];
function jsFunction() {
    var client = document.getElementById('drop_client');
    var c_name = client.options[client.selectedIndex].text;
    var data = {};
    data.c_name = c_name;
    var drop_branch=document.getElementById('drop_banch');
    $.ajax({
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        url: 'http://localhost:3000/dispatch_item',

        success: function (data) {
            console.log('success');
            for (var k in data) {
                alert(data[k].b_name);
                b_name.push(data[k].b_name);
            }
  

块引用

            for (var m in b_name) {
                alert(b_name[m]);
            }

            //alert(JSON.stringify(data));
            console.log(data);
            console.log(JSON.stringify(data));
        },
        error: function () {
            alert('Ajax error!');
            console.log('process error');
        }
    });


div(style='')
                 .bs-docs-example.no-code(style='float:left; margin-right:10px')
                     select.selectpicker(onchange='jsFunction();', id='drop_client', data-live-search='true')
                         option(value='', disabled='', selected='') Select Client
                             for result in clients
                                 option(value='#{result.c_name}') #{result.c_name}
                 .bs-docs-example.no-code(style='float:right;')
                     select.selectpicker(onchange='', id='drop_banch', data-live-search='true')
                         option(value='', disabled='', selected='') Select Branch
                             for result in b_name //THIS IS WRONG
                                 option(value='#{result}') #{result}

加载页面错误时!

错误:

    select.selectpicker(onchange='', id='drop_banch', data-live-search='true') 88| option(value='', disabled='', selected='') Select Branch > 89| for result in b_name 90| option(value='#{result}') #{result} 91| div(style='margin-top:10px;') 92| label Select Router Cannot read property 'length' of undefined

TypeError: C:\Users\ADSS\WebstormProjects\untitled\views\dispatch.jade:89
    87|                          select.selectpicker(onchange='', id='drop_banch', data-live-search='true')
    88|                              option(value='', disabled='', selected='') Select Branch
  > 89|                                  for result in b_name
    90|                                      option(value='#{result}') #{result}
    91|             div(style='margin-top:10px;')
    92|                 label Select Router

如何解决这个问题?如何在选择中显示数组值? 或者如何在select中附加选项?

1 个答案:

答案 0 :(得分:0)

尝试使用标签

script.
    var b_name = [];
    function jsFunction() {
        var client = document.getElementById('drop_client');
        var c_name = client.options[client.selectedIndex].text;
        var data = {};
        data.c_name = c_name;
        var drop_branch=document.getElementById('drop_banch');
        $.ajax({
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            url: 'http://localhost:3000/dispatch_item',

            success: function (data) {
                console.log('success');
                for (var k in data) {
                    alert(data[k].b_name);
                    b_name.push(data[k].b_name);
                }
        ...