Question

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

这是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>

我尝试使用此代码获取价值：

$("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
})

但它并没有给我下拉的价值。怎么做到的？

Answer 1

在Polymer 1.0中，您可以使用ITEM_PIPELINES = ['your_Project_Name.pipelines.myExporter']中的on-iron-select属性。例如：

paper-dropdown-menu

聚合物功能：

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

Answer 2

更新您的事件处理程序：

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

<script>

如果您想要所选的项目值：

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

获取纸张下拉菜单的选定值

3 个答案: