2016-05-21 12 views
0

Mein Code ist unten: Die Frage ist:Knoten, Express, Jade Dropdown

Wie mache ich es so, dass meine Jade-Datei wird eine Beschreibung des Ereignisses machen, basierend auf dem Wert des Auswahlmenüs? Wenn die select-Option den Wert 1 hat, sollte p p # {event [1] .description} darstellen.

unter Berücksichtigung Jade Precompiles Ich habe keinen Zugriff auf das DOM, die document.getElementbyId("test").selectedIndex; eliminiert Unten ist mein Versuch, es auf der Serverseite zu lösen. Ich denke, dass ich etwas vermisse, denn für mich ist es egal, auf welche Weise ich Zugriff auf das DOM benötige, um die Wertänderung im Auswahlmenü zu sehen, um die "Ereignisbeschreibung" auszuspucken.

Jede Hilfe wäre willkommen.

Jade Datei

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] 

Strecke

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

Mein Gedanke war, dass ich den Looping-Array auf Server-Seite erstellen könnte so wäre es zu kompilieren, aber sobald die Seite gerendert hat und Ich ändere den ausgewählten Optionswert, den er nicht im laufenden Betrieb neu kompilieren würde.

Würde Reagieren dieses Problem lösen? Es scheint ein bisschen übertrieben zu sein.

Vielen Dank noch einmal für Ihre Zeit alle.

Antwort

0

Sie können Ihrer Seite ein Stück JavaScript hinzufügen, das dann den gewünschten Text im Browser ändert. Fügen Sie so etwas am Ende Ihrer Jade-Seite hinzu:

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