Kanav Kanav - 7 months ago 291
HTML Question

Get selected value of paper-dropdown-menu

I'm using polymer's

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>

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?


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);