Template helper el-select

handlebars.el.form

Outputs a select control

{{{el-select name=name options=options}}}

Examples

{{{el-select name="foo" options=opts}}}
Context {opts:["a", "b"]}
→  <select name="foo">
     <option value="a">a</option>
     <option value="b">b</option>
   </select>

{{{el-select options=opts}}}
Context {opts: [{content:"Foo", value:1}, {content:"Bar", value:2}] }
→  <select>
     <option value="1">Foo</option>
     <option value="2">Bar</option>
   </select>

{{{el-select options=opts}}}
Context {opts: [{content:"Foo", value:1}, {content:"Bar", value:2, selected:true}] }
→  <select>
     <option value="1">Foo</option>
     <option selected value="2">Bar</option>
   </select>

{{{el-select options=opts values=vals}}}
Context {opts: ["Foo", "Bar"], vals: [1, 2]}
→  <select>
     <option value="1">Foo</option>
     <option value="2">Bar</option>
   </select>

{{{el-select options=opts values=vals selected=selected}}}
Context {opts: ["Foo", "Bar"], vals: [1, 2], selected:2}
→  <select>
     <option value="1">Foo</option>
     <option selected value="2">Bar</option>
   </select>

{{{el-select options=opts values=vals selected=selected}}}
Context {opts: ["Foo", "Bar"], vals: [1, 0], selected:0}
→  <select>
     <option value="1">Foo</option>
     <option selected value="0">Bar</option>
   </select>

{{{el-select options=opts values=vals selected=selected}}}
Context {opts: ["Foo", "Bar"], vals: ["", "a"], selected:""}
→  <select>
     <option selected value="">Foo</option>
     <option value="a">Bar</option>
   </select>

{{{el-select options=opts values=vals options-disabled=optionsDisabled}}}
Context {opts: ["Foo", "Bar"], vals: [1, 2], optionsDisabled:2}
→  <select>
     <option value="1">Foo</option>
     <option disabled value="2">Bar</option>
   </select>

{{{el-select options=opts values=vals selected=selected options-disabled=optionsDisabled}}}
Context {opts: [{content:"Foo", value:1, disabled:true}, {content:"Bar", value:2, selected:true}], vals:["x", "y"], selected:"x", optionsDisabled:"y" }
→  <select>
     <option selected value="x">Foo</option>
     <option disabled value="y">Bar</option>
   </select>

{{{el-select options=opts cue=cue}}}
Context {opts: [{content:"Foo", value:1}, {content:"Bar", value:2}], cue: "Please select" }
→  <select>
     <option class="select-cue" disabled selected>Please select</option>
     <option value="1">Foo</option>
     <option value="2">Bar</option>
   </select>

{{{el-select options=opts values=vals value=selected}}}
Context {opts: ["Foo", "Bar"], vals: [1, 2], selected:2}
→  <select>
     <option value="1">Foo</option>
     <option selected value="2">Bar</option>
   </select>
Source:
Parameters:
Name Type Attributes Description
options array <optional>

Array of option objects or strings

values array <optional>

Array of values

If passed, trumps any value passed as part of the corresponding option object

If no options are passed, values is used instead

selected string | array <optional>

Values which are selected

If passed, trumps any selected value passed as part of the corresponding option object

value string | array <optional>

Alternative param to pass selected value

options-disabled string | array <optional>

Values which are disabled

If passed, trumps any disabled value passed as part of the corresponding option object

NB. The parameter is options-disabled, so that disabled can still be used to disable the entire control

cue string | object <optional>

String to display as first element of select when no values has been selected