vaadin-combo-box Value Handling

Selecting a value

Selecting a value from the dropdown list changes vaadin-combo-box's value property and triggers a value-changed event. Changing the value property explicitly also updates the visible fields.

Selected value: .


        var combobox = combobox || document.querySelector('vaadin-combo-box');
        combobox.items = elements;

        combobox.addEventListener('value-changed', function() {
          document.querySelector('#selected-value').innerHTML = combobox.value;
        });
        combobox.value = 'Carbon';

Using as a form field

The vaadin-combo-box element is also extended with IronFormElementBehavior so it can be used as a field in an iron-form. See the code below for an example on how it works.


        var form = form || document.querySelector('form');
        var combobox = form.querySelector('vaadin-combo-box');
        combobox.items = elements;

        form.addEventListener('iron-form-submit', function() {
          alert('Form submitted with name: ' + form.serialize().name);
          return false;
        });