You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Handling the Value · Vaadin
Vaadin Elements - Combo Box - Handling the Value

Handling the Value

Getting Started

You need to provide the set of items which the user can select with the items property. Current selection is indicated by the value and selectedItem properties. You can set or change the selection programmatically by setting the value or selectedItem property. Doing so also updates the visible fields.

When setting the items declaratively, notice that the attribute value needs to be a valid JSON string. You need to use single quotes for the attribute value and double quotes inside the value (in the JSON string). Alternatively, you can escape the double quotes inside the value.

<vaadin-combo-box
  label="Element"
  items='["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"]'
  value="Bromine">
</vaadin-combo-box>

Setting the items and value programmatically:

var combobox = document.querySelector('vaadin-combo-box');
combobox.items = ['Bohrium', 'Boron', 'Bromine', 'Cadmium', 'Caesium', 'Calcium'];
combobox.value = 'Bromine';

Events

The vaadin-combo-box element dispatches events when the selection changes. An event contains the value property in the event.detail object.

Since there are two selection properties, namely value and selectedItem, an event is fired for each. value-changed event contains the selection as a String value, whereas selected-item-changed contains the selection as an Object.

Additionally, a change event is fired to match the behavior with <select> element.

The order in which value-changed and selected-item-changed events are fired might vary depending on the situation, but change event should always be last.
var combobox = document.querySelector('vaadin-combo-box');
combobox.addEventListener('value-changed', function(event) {
  console.log(event.detail.value);
});

combobox.addEventListener('selected-item-changed', function(event) {
  console.log(event.detail.value);
});

When using the element inside another Polymer element, you can use the declarative binding syntax to subscribe for an event:

<dom-module id="my-element">
  <template>
    <vaadin-combo-box on-value-changed="valueChanged"></vaadin-combo-box>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-element',
    valueChanged: function(event) {
      alert(event.detail.value);
    }
  });
</script>