<juicy-select>

Simple Polymer select element with multiple support.

This element is a workaround for Polymer binding issues.

1. IE11 does not support <template is="dom-repeat"> element inside <select>. See the Polymer issue #1735.
2. The initial value of a <select> is being lost when generating options with a dom-repeat.

<select value="{{model.SelectedValue::change}}">
    <template is="dom-repeat" items="{{model.Options}}">
        <option value="{{item.Value}}">{{item.Name}}</option>
    </template>
</select>

In this case the value="{{model.SelectedValue::change}}" binding is executed before options are rendered by the dom-repeat. The HTML <select> element can not contain a value which does not exists in it's options collection. This leads to the loss of the initial value.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install juicy-select --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill (if needed):

   <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/juicy-select/juicy-select.html">

3. Start using it!

   Simple select

   <juicy-select
       caption-text="No favorite country"
       value="{{model.FavoriteCountry}}"
       options="{{model.Countries}}"
       text-property="Name"
       value-property="Name">
   </juicy-select>

   Multiple select

   <juicy-select
       multiple="true"
       options="{{model.Countries}}"
       selected-property="Selected"
       text-property="Name"
       value-property="Name">
   </juicy-select>

   Custom <select> node

   <juicy-select
       caption-text="No favorite country"
       value="{{model.FavoriteCountry}}"
       options="{{model.Countries}}"
       text-property="Name"
       value-property="Name">
       <select class="form-control"></select>
   </juicy-select>

Properties

Notes

• <juicy-select> keeps actual <select> element in the light DOM. If the <select> node is not present within <juicy-select>, it will be created.

• <juicy-select> is a hybrid element.

Contributing and Development

History

For detailed changelog, check Releases.

License

MIT