eugef / polymer-select-with-options Goto Github PK

##Select with options

Replacement for select element that works with browsers (like Internet Explorer, including IE11) that don't support templates (including dom-repeat) inside <select> tags. See Polymer issue #1735.

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/vehikl/polymer-select-with-options.git.
• Install with Bower: bower install polymer-select-with-options.

For an existing Polymer project, only the select-with-option.html file is required to be imported. The remaining files are for use in the demo.

├── README.md
├── bower.json
├── demo.html
├── polymer-micro.html
├── polymer-mini.html
├── polymer.html
└── select-with-options.html

Import select-with-options.html into your project;

<link rel="import" href="select-with-options.html">

This component supports data-binding an array of String, an array of Objects as well as hard coded options.

###Array of Strings

Simply bind an array of strings to the 'options-list' attribute. The array values will be mapped to both 'value' and 'label'.

<select is="select-with-options" options-list="{{options}}" value="{{value::change}}"></select>

###Array of Objects

If you supply an array of objects there are additional parameters to specify which object properties to map as the value and label (option-value and option-label).

<select is="select-with-options" options-list="{{options}}" option-value="id" option-label="name" value="{{value::change}}"></select>

###Hard coded options

Just like a standard select element, you can provide hard-coded <option> tags, which are displayed before those provided in the options attribute.

<select is="select-with-options" options-list="{{options}}" option-value="id" option-label="name" value="{{value::change}}">
    <option value="hardcoded_option">Hardcoded Option</option>
</select>

Live preview available here. Source for demo is available in demo.html