我用的是聚合物paper-dropdown-menu https://www.polymer-project.org/0.5/docs/elements/paper-dropdown-menu.html作为我的项目的下拉菜单。现在,当用户从下拉列表中选择一个选项时,我想获取所选选项的值。
这是 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
})
但它没有给我下拉菜单的值。如何得到它?
在 Polymer 1.0 中你可以使用on-iron-select
属性在paper-dropdown-menu
。例如:
<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);
}
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)