Get selected value of paper-dropdown-menu


1 Answers

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
})
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?




getting values off of dropdown-menu in polymer

This works for me:

<paper-dropdown-menu 
            valueattr="label_value" 
            on-core-select="{{get_dd_value}}">

          <paper-item label="opt1" label_value="1"></paper-item>
          <paper-item label="opt2" label_value="2"></paper-item>
</paper-dropdown-menu>     

//JS part:
get_dd_value: function(e, detail) {
          var value = detail.item.attributes.label_value.value;
}





Related



Tags