如何在玉模板引擎中使用 ajax 填充下拉列表？答案

【问题标题】：how to populate a dropdown using ajax in jade template engine?如何在玉模板引擎中使用 ajax 填充下拉列表？
【发布时间】：2017-12-28 13:37:59
【问题描述】：

我需要针对其他下拉列表的选择填充一个下拉列表。

这是我的代码，

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

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

【问题讨论】：

标签： javascript node.js ajax express pug

【解决方案1】：

用标签试试

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);
                }
        ...

【讨论】：

什么？我找不到你？