获取纸张下拉菜单的选定值 [英] Get selected value of paper-dropdown-menu

问题描述

我正在使用聚合物的 paper-dropdown-菜单 作为我的项目的下拉菜单。现在，我想获取所选项的值，当用户从下拉列表中选择一个选项。

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.

这是HTML结构

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

推荐答案

在Polymer 1.0中，您可以使用 on-iron-select paper-dropdown-menu 中的c $ c>属性。例如：

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">

聚合物功能：

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

这篇关于获取纸张下拉菜单的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！