[英]Node, Express, Jade dropdownlist
My code is below: The question is: 我的代码如下:问题是:
How do I make it so that my jade file will render a description of the event based on the value of the select menu? 如何使我的Jade文件根据选择菜单的值呈现事件的描述? Basically if the select option has a value of 1 then p should render p #{event[1].description}.
基本上,如果select选项的值为1,则p应该呈现p#{event [1] .description}。
considering Jade precompiles I don't have access to the DOM which eliminates document.getElementbyId("test").selectedIndex;
考虑到Jade预编译,我无权访问DOM,从而消除了
document.getElementbyId("test").selectedIndex;
Below is my attempt at solving it on server side. 下面是我在服务器端解决此问题的尝试。 I think I am missing something though because to me no matter the approach I will need access to the DOM to see the value change in the select menu to spit out the "event description".
我想我虽然缺少一些东西,因为对我而言,无论采用哪种方法,我都需要访问DOM才能在选择菜单中看到值更改以吐出“事件描述”。
Any help would be appreciated. 任何帮助,将不胜感激。
Jade File 玉锉
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
a(href='/')
button.btn.btn-primary(type="button") Cancel
p#{events[0].description} //I want to pass an array instead of explicitly calling [0]
Route 路线
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);
});
});
My thought was that I could create the looping array on server side so it would compile, but once the page has rendered and I change the selected option value it wouldn't recompile again on the fly. 我的想法是我可以在服务器端创建循环数组,以便对其进行编译,但是一旦页面已呈现并且我更改了所选的选项值,它就不会立即进行重新编译。
Would React solve this problem? React能解决这个问题吗? It seems like a bit overkill.
似乎有点矫kill过正。
Thank you again for your time everyone. 再次感谢大家的宝贵时间。
You can add a piece of JavaScript to your page that then does the desired text changes in the browser. 您可以在页面上添加一段JavaScript,然后在浏览器中进行所需的文本更改。 Add something like this to the bottom of your Jade page:
在Jade页面的底部添加以下内容:
script.
$('#theOptionField').on('change', function(e) {
// get value that the user selected
// modify the HTML of the element that should display the value
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.