How do you set <select> value/option in edit/new template - ExpressJS - express

Question

I'm trying to use a partial to share a _form.html across an new.html and edit.html templates in ExpressJS. The problem is with the select tag.
How do you get a select HTML element to have the correct option selected in an edit form? If you use
<select value="#{blob.kind || ''}">
The select doesn't show the option whose value is equal to the blob.kind.

Answer 1

In order to specify a selected option, a selected attribute needs to be added to the option element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Assuming the blob.kind property is a value string, you could write the Jade for your select and option elements as follows:
-
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
For future reference, Jade has been renamed to Pug.

Answer 2

I used to do this as follows:
select
each obj in options
option(value= obj.value, selected=blob.kind === obj.value ? true : false)=
obj.text

Answer 3

Sean's suggestion is excellent, but his syntax didn't quite work for me. Here's what I ended up with:
- 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}