<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

Name	Type	Description
options	Array	Array of objects to generate select options
text-property	String	Name of the object property to take text for the options
value-property	String	Name of the object property to take value for the options
caption-text	String	Text of an empty option, empty option will not be created if the value is not set
value	String	Currently selected value, for single selection only (see the multiple property)
multiple	Boolean	Same as <select multiple>
selected-property	String	Name of the object property to indicate whether it's selected, for multiple selection only (see the multiple property)

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