Skip to content

eugef/polymer-select-with-options

 
 

Repository files navigation

##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.

Quick start

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.

What's included

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

Usage

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>

Demo

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 100.0%