Polymer 1.0: How can I get the value of the selected item in a paper-dropdown-menu?

Gilberg picture Gilberg · Aug 26, 2015 · Viewed 7.5k times · Source

Polymer 1.0: How can I get the value of the selected item in a paper-dropdown-menu?

I am submitting some info with iron-ajax and I can't the value (I don't want the label) from the paper-dropdown-menu. The id of my paper-dropdown-menu is 'mymenu'. I have tried these:

this.$.mymenu.selectedItem.value

Answer

Maria picture Maria · Aug 26, 2015

If you set the value in the value attribute, the following should work:

this.$.mymenu.selectedItem.getAttribute("value")

Update

For a declarative approach, you can set attr-for-selected="value" and then bind to the selected attribute.

<paper-dropdown-menu label="Your favourite pastry">
    <paper-menu attr-for-selected="value" selected="{{selection}}" class="dropdown-content">
        <paper-item value="croissant">Croissant</paper-item>
        <paper-item value="donut">Donut</paper-item>
        <paper-item value="madeleine">Madeleine</paper-item>
    </paper-menu>
</paper-dropdown-menu>
<div>[[selection]]</div>