如何在 Polymer 中重置纸张下拉菜单，以便不选择任何内容？答案

【问题标题】：How can I reset a paper-dropdown-menu in Polymer so nothing is selected?如何在 Polymer 中重置纸张下拉菜单，以便不选择任何内容？
【发布时间】：2016-01-21 01:44:28
【问题描述】：

我想在 JavaScript 中将 Polymer 纸张下拉菜单重置为其初始状态，因此未选择任何内容，因此如下所示：

我可以在 paper-dropdown-menu 内的 paper-menu 标签中添加一个 id 并在 JavaScript 中访问它并选择它的选定索引：

document.getElementById("accountTypeMenu").selected = 1;

但是，我只能选择一个可用的项目，所以数字需要为 0 或更大。我无法将其设置为 -1 以不选择任何内容以直观地将其返回到初始状态，但我可以将所选状态记录为我刚刚设置的状态。我尝试更改的其他值选择为空且未定义。

这是我用于纸质下拉菜单的 html：

<paper-dropdown-menu 
id="accountTypeDropdown"
selected-item="{{selectedItem}}"
selected-item-label="{{selected}}"
label='&#65290;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]]">

【问题讨论】：

标签： menu reset polymer-1.0 selected dropdown

【解决方案1】：

它是一个现成的唯一字段。因此，您可能必须使用 Polymer 提供的函数来设置仅就绪值。试试下面的

document.getElementById("accountTypeDropdown")._setSelectedItem({});

如果上述方法不起作用，请尝试以下其他变体

document.getElementById("accountTypeDropdown")._setSelectedItem(null);
document.getElementById("accountTypeDropdown")._setSelectedItem();

【讨论】：

谢谢！ document.getElementById("accountTypeDropdown")._setSelectedItem(null);有效！
重置适用于 _setSelectedItem(null)，但是有一件奇怪的事情。之后通过更改模型设置新值仅在新值与重置之前的值不同时才有效。我在这里设置了一个测试用例：pm.yves.glodt.name
尝试在paper-menu 上添加selected={{selectedMenu}}。并在您想重置项目时设置selectedMenu=null。

【解决方案2】：

现在使用<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;

【讨论】：

【解决方案3】：

您可以手动触发事件：

document.querySelector("#accountTypeDropdown")._onIronDeselect();

【讨论】：