Wie setzen Sie <select> Wert/Option in bearbeiten/neue Vorlage - ExpressJS

Question

Ich versuche, eine _form.html über eine neue.html und edit.html Vorlagen in ExpressJS zu teilen. Das Problem ist mit dem select Tag.

Wie erhalten Sie ein ausgewähltes HTML-Element, damit die richtige Option in einem Bearbeitungsformular ausgewählt wird? Wenn Sie

verwenden

<select value="#{blob.kind || ''}"> 

Die select zeigt nicht die Option, deren Wert gleich der blob.kind.

Answer 1

habe ich dies zu tun, wie folgt:

select 
    each obj in options 
    option(value= obj.value, selected=blob.kind === obj.value ? true : false)= 
obj.text 

Answer 2

Um eine gewählte Option angeben, wird ein selected Attribut muss das option Element hinzugefügt werden: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

die blob.kind Eigenschaft Unter der Annahme einer Wertzeichenfolge ist, könnten Sie den Jade für Ihre select und option Elemente schreiben als folgt:

- 
    var options = [ 
    {value: 'option1', text: 'Option 1'}, 
    {value: 'option2', text: 'Option 2'}, 
    {value: 'option3', text: 'Option 3'}, 
    {value: 'option4', text: 'Option 4'} 
    ]; 

select 
    each obj in options 
    if (blob.kind === obj.value) 
     option(value= obj.value, selected)= obj.text 
    else 
     option(value= obj.value)= obj.text 

Für die Zukunft hat Jade renamed to Pug gewesen.

Answer 3

Sean Vorschlag ist ausgezeichnet, aber seine Syntax hat für mich nicht ganz funktioniert. Hier ist, was ich endete mit:

- const stateOptions = [{value:'AL', text:'Alabama'}, ...] 
    select#state(name='state' required) 
    each option in stateOptions 
     if (option.value === meeting.state) 
     option(value=(option.value) selected) #{option.text} 
     else 
     option(value=(option.value)) #{option.text}