Question

我的代码如下：问题是：

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

考虑到Jade预编译我无法访问DOM，这消除了document.getElementbyId("test").selectedIndex;以下是我尝试在服务器端解决它。我想我错过了一些东西，因为对我而言无论采用何种方法，我都需要访问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会解决这个问题吗？这似乎有点矫枉过正。

再次感谢大家的时间。

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

Node，Express，Jade下拉列表

1 个答案: