如何在Polymer中重置paper-dropdown-menu，使其没有选择任何内容？

Question

我希望在JavaScript中将Polymer paper-dropdown-menu重置为其初始状态，以便没有选中任何内容，看起来像这样：

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

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

然而，我只能选择一个可用的项目，所以数量需要为0或更大。我不能将其设置为-1以选择无返回到其初始状态，但我可以记录所选状态，以便查看刚刚设置的内容。我尝试更改所选值的其他值包括null和undefined。

以下是我使用paper-dropdown-menu的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]]">

- Chewie The Chorkie

Answer 1

这是只读字段。因此，您可能需要使用Polymer提供的函数来设置只读值。请尝试以下操作

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

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

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

- Srik

---

谢谢！document.getElementById("accountTypeDropdown")._setSelectedItem(null); 成功了！ - Chewie The Chorkie

重置可通过_setSelectedItem(null)实现，但有一个奇怪的事情。仅在新值与重置前的值不同的情况下，通过更改模型设置新值才起作用。我在这里设置了一个测试用例：http://pm.yves.glodt.name/ - yglodt

尝试在 paper-menu 上添加 selected={{selectedMenu}}，并在想要重置项目时将 selectedMenu=null。 - Srik

Answer 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;

- yglodt

Answer 3

您可以手动触发一个事件：

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

- ANTARA