Node, Express, Jade dropdownlist

Question

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? Basically if the select option has a value of 1 then p should render p #{event[1].description}.

considering Jade precompiles I don't have access to the DOM which eliminates 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".

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? It seems like a bit overkill.

Thank you again for your time everyone.

Answer 1

You can add a piece of JavaScript to your page that then does the desired text changes in the browser. Add something like this to the bottom of your Jade page:

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