Function selectOptions

  • selectOptions(choices: object | object[], options: any): SafeString

    A helper to create a set of <option> elements in a <select> block based on a provided dictionary. The provided keys are the option values while the provided values are human-readable labels. This helper supports both single-select and multi-select input fields.

    Parameters

    • choices: object | object[]

      A mapping of radio checkbox values to human-readable labels

    • options: any

      Options which configure how select options are generated by the helper

    Returns SafeString

    Generated HTML safe for rendering into a Handlebars template

    Example: The provided input data

    let choices = {a: "Choice A", b: "Choice B"};
    let value = "a";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value localize=true}}
    </select>

    The resulting HTML

    <select name="importantChoice">
      <option value="a" selected>Choice A</option>
      <option value="b">Choice B</option>
    </select>

    Example: Using inverted choices

    let choices = {"Choice A": "a", "Choice B": "b"};
    let value = "a";

    The template HTML structure

    <select name="importantChoice">
     {{selectOptions choices selected=value inverted=true}}
    </select>

    Example: Using valueAttr and labelAttr with objects

    let choices = {foo: {key: "a", label: "Choice A"}, bar: {key: "b", label: "Choice B"}};
    let value = "b";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value valueAttr="key" labelAttr="label"}}
    </select>

    Example: Using valueAttr and labelAttr with arrays

    let choices = [{key: "a", label: "Choice A"}, {key: "b", label: "Choice B"}];
    let value = "b";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value valueAttr="key" labelAttr="label"}}
    </select>

Settings

Member Visibility