Get selected value of paper-dropdown-menu

Question

I'm using polymer's paper-dropdown-menu as a dropdown menu for my project. Now i want to get the value of selected option, when a user selects an option from the dropdown.

Here's the HTML structure

<paper-dropdown-menu label="Color" class="text-color-labels">
    <paper-dropdown class="dropdown">
        <core-menu class="menu" id="textColor">
            <paper-item value="#000000">Black</paper-item>
            <paper-item value="#522A19">Dark Brown</paper-item>
            <paper-item value="#7D331E">Light Brown</paper-item>
            <paper-item value="#EDCCBA">Tan</paper-item>
            <paper-item value="#B89325">Old Gold</paper-item>
            <paper-item value="#B7A967">Vegas Gold</paper-item>
            <paper-item value="#29753A">Kelly Green</paper-item>
        </core-menu>
    </paper-dropdown>
</paper-dropdown-menu>

I tried to get value using this code:

$("body").on("core-select", ".text-color-labels", function(){
    var selectedItem = document.querySelector('#textColor').selectedItem;
    var selectedColor = selectedItem.textContent;
    console.log(selectedColor); //gives Black, Dark Brown, Light Brown etc
})

But it doesn't gives me the value of the dropdown. How to get that?

Answer 1

In Polymer 1.0 you can use on-iron-select attribute in paper-dropdown-menu . For example:

<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">

Polymer function:

  _itemSelected : function(e) {
    var selectedItem = e.target.selectedItem;
    if (selectedItem) {
      console.log("selected: " + selectedItem.innerText);
    }
  },

Answer 2

Update your event handler as so:

$("body").on("core-select", ".text-color-labels", function(e) {
    var selectedItem = e.target.selected,
        selectedColor = selectedItem.textContent;
    console.log(selectedColor); //gives Black, Dark Brown, Light Brown etc
})

Answer 3

<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">

If you want the selected item value:

_itemSelected : function(e) {
    var selectedItem = e.target.selectedItem;
    if (selectedItem) {
        console.log("selected: " + selectedItem.value);
    }
}