Jade Template - SELECT OPTION with for

Question

select(id="xxx", name="xxxyyy")
- for(var i = 1;i<10;i++){
  option(value="#{i}") Some value for #{i}
- }

but it generates the following HTML

<select id="xxxx" name "xxxyyy"></select>
<option value="1">Some value for 1</option>

....

I've tried to include the select inside the for loop and it works as expected (it generates 10 select drop controls with one item on each one of them).

What am I missing here?

Answer 1

I think you've got your indentation messed up. Jade is like coffeescript, in that indentation is significant and donates nesting. See here. So that the Jade engine knows that your option loop should be within the select tag, the option loop needs to be indented from the select statement, whereas you've got yours level with the select statement.

select(id="xxx", name="xxxyyy")
    -for(var i = 1;i<10;i++){
    option(value="#{i}") Some value for #{i}
    -}