Node、Express、Jade 下拉列表答案

【问题标题】：Node, Express, Jade dropdownlistNode、Express、Jade 下拉列表
【发布时间】：2016-05-21 18:28:42
【问题描述】：

我的代码如下：问题是：

如何使我的jade文件根据选择菜单的值呈现事件描述？基本上，如果选择选项的值为 1，那么 p 应该呈现 p #{event[1].description}。

考虑到 Jade 预编译，我无法访问消除 document.getElementbyId("test").selectedIndex; 的 DOM 以下是我在服务器端解决它的尝试。我认为我遗漏了一些东西，因为对我来说，无论采用何种方法，我都需要访问 DOM 以查看选择菜单中的值变化以吐出“事件描述”。

任何帮助将不胜感激。

翡翠档案

    extends layout

block content

    form(role='form', action="/doSomthing", method="post")
      select#test.form-control(name = "choices")
        each events, i in event
         option(value=i) #{events.event}
      button.btn.btn-default(type='submit') Submit
      &nbsp; 
      a(href='/')
      button.btn.btn-primary(type="button") Cancel
      
    p#{events[0].description} //I want to pass an array instead of explicitly  calling [0]

路线

router.get('/eventreg', function(req, res) {
    var ei = event.eventid;
    var eiarray = Event.findOne({'eventid': cc });
    
    Event.find({}, function(err, event){
        res.render('eventreg', {user : req.user, event: event});
        console.log(event);
        console.log(eiarray);
    });
});

我的想法是我可以在服务器端创建循环数组以便它可以编译，但是一旦页面呈现并且我更改了选定的选项值，它就不会再次重新编译。

React 能解决这个问题吗？好像有点矫枉过正了。

再次感谢大家的宝贵时间。

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

您可以将一段 JavaScript 添加到您的页面，然后在浏览器中进行所需的文本更改。在您的 Jade 页面底部添加如下内容：

script.
  $('#theOptionField').on('change', function(e) {
    // get value that the user selected
    // modify the HTML of the element that should display the value
  });

【讨论】：