如何在 Polymer 中重置纸张下拉菜单以便不选择任何内容?
How can I reset a paper-dropdown-menu in Polymer so nothing is selected?
我想在 JavaScript 中将 Polymer paper-dropdown-menu 重置为初始状态,所以没有 selected,所以它看起来像这样:
我可以在 paper-dropdown-menu 内的 paper-menu 标签中添加一个 id,并在 JavaScript 中访问它并选择它的 selected 索引:
document.getElementById("accountTypeMenu").selected = 1;
但是,我只能 select 一个可用的项目,因此数字需要为 0 或更大。我不能将它设置为 -1 到 select 什么都不能 return 到它在视觉上的初始状态,但我可以将 selected 状态记录到我刚刚设置的状态。我尝试将 selected 更改为的其他值为空且未定义。
这是我用于纸张下拉菜单的html:
<paper-dropdown-menu
id="accountTypeDropdown"
selected-item="{{selectedItem}}"
selected-item-label="{{selected}}"
label='*Account type'
style="width:50%;"
noink
no-animations>
<paper-menu id="accountTypeMenu"
class="dropdown-content"
onmouseup="requiredMenuFieldSelected('accountType')">
<template is="dom-repeat"
items="{{accountTypes}}"
as="accountType">
<paper-item value="[[accountType.id]]">[[accountType.name]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input"
name="accountType"
type="hidden"
value$="[[selectedItem.value]]">
这是一个只读字段。因此,您可能必须使用 Polymer 提供的函数来设置只读值。尝试以下
document.getElementById("accountTypeDropdown")._setSelectedItem({});
如果上述方法不起作用,请尝试以下其他变体
document.getElementById("accountTypeDropdown")._setSelectedItem(null);
document.getElementById("accountTypeDropdown")._setSelectedItem();
您可以手动触发事件:
document.querySelector("#accountTypeDropdown")._onIronDeselect();
现在看来用<paper-listbox></paper-listbox>
比较好。
有了它你可以简单地将selected
设置为null
:
<paper-dropdown-menu label="Type">
<paper-listbox class="dropdown-content" selected="{{myObj.type}}" attr-for-selected="value" id="list">
<paper-item value="0">Type 0</paper-item>
<paper-item value="1">Type 1</paper-item>
</paper-listbox>
</paper-dropdown-menu>
然后在JavaScript
:
this.$.list.selected = null;
我想在 JavaScript 中将 Polymer paper-dropdown-menu 重置为初始状态,所以没有 selected,所以它看起来像这样:
我可以在 paper-dropdown-menu 内的 paper-menu 标签中添加一个 id,并在 JavaScript 中访问它并选择它的 selected 索引:
document.getElementById("accountTypeMenu").selected = 1;
但是,我只能 select 一个可用的项目,因此数字需要为 0 或更大。我不能将它设置为 -1 到 select 什么都不能 return 到它在视觉上的初始状态,但我可以将 selected 状态记录到我刚刚设置的状态。我尝试将 selected 更改为的其他值为空且未定义。
这是我用于纸张下拉菜单的html:
<paper-dropdown-menu
id="accountTypeDropdown"
selected-item="{{selectedItem}}"
selected-item-label="{{selected}}"
label='*Account type'
style="width:50%;"
noink
no-animations>
<paper-menu id="accountTypeMenu"
class="dropdown-content"
onmouseup="requiredMenuFieldSelected('accountType')">
<template is="dom-repeat"
items="{{accountTypes}}"
as="accountType">
<paper-item value="[[accountType.id]]">[[accountType.name]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input"
name="accountType"
type="hidden"
value$="[[selectedItem.value]]">
这是一个只读字段。因此,您可能必须使用 Polymer 提供的函数来设置只读值。尝试以下
document.getElementById("accountTypeDropdown")._setSelectedItem({});
如果上述方法不起作用,请尝试以下其他变体
document.getElementById("accountTypeDropdown")._setSelectedItem(null);
document.getElementById("accountTypeDropdown")._setSelectedItem();
您可以手动触发事件:
document.querySelector("#accountTypeDropdown")._onIronDeselect();
现在看来用<paper-listbox></paper-listbox>
比较好。
有了它你可以简单地将selected
设置为null
:
<paper-dropdown-menu label="Type">
<paper-listbox class="dropdown-content" selected="{{myObj.type}}" attr-for-selected="value" id="list">
<paper-item value="0">Type 0</paper-item>
<paper-item value="1">Type 1</paper-item>
</paper-listbox>
</paper-dropdown-menu>
然后在JavaScript
:
this.$.list.selected = null;