Question

我尝试使用partial来在ExpressJS中的new.html和edit.html模板中共享_form.html。问题出在select标签上。如何获得选择的HTML元素以在编辑表单中选择正确的选项？如果你使用＆lt; select value =＆＃34;＃{blob.kind || ＆＃39;＆＃39;}＆＃34;＆GT; select不显示其值等于blob.kind的选项。

Answer 1

要指定所选选项，需要将selected属性添加到option元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

假设blob.kind属性是值字符串，您可以为select和option元素编写Jade，如下所示：

-
  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

为了将来参考，Jade已经renamed to Pug。

Answer 2

我曾经这样做过：

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

Answer 3

肖恩的建议非常好，但他的语法对我来说并不适合。这就是我最终得到的结果：

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

如何在编辑/新模板中设置<select> value /选项 - ExpressJS

3 个答案: