如何重设铁框内的下拉菜单？

Question

样例代码：

<iron-form id="form1">
    <form method="get" action="/form/handler">
        <paper-input name="name" label="Name" required></paper-input>
        <paper-dropdown-menu label="Dinosaurs">
            <paper-listbox slot="dropdown-content" selected="1">
                <paper-item>allosaurus</paper-item>
                <paper-item>brontosaurus</paper-item>
                <paper-item>carcharodontosaurus</paper-item>
                <paper-item>diplodocus</paper-item>
            </paper-listbox>
        </paper-dropdown-menu>
        <paper-button raised on-click="_save">Save</paper-button>
        <paper-button raised on-click="_reset">Reset</paper-button>
      </form>
</iron-form>

...


_reset() {
    this.$.form1.reset();
}

单击“重置”按钮时，下拉菜单未设置为其默认值。

Answer 1

paper-dropdown-menu的问题在于它没有自行设置值的机制。

与其相反，它允许您通过contentElement属性获取其包含的paper-listbox并调用set方法。

恐怕iron-form无法在这里发挥作用，因此我将扩展_reset方法：

_reset() {
    this.$.myDropdown.contentElement.set('selected', null); // or whatever fallback
    this.$.form1.reset();
}

当然，您也可以直接引用列表框。

Answer 2

您可以为选定的属性使用变量：

 <paper-listbox slot="dropdown-content" selected="{{selected}}">

并在以下位置定义选定的属性：

 static get properties() { return {
     selected: {type:Number, value:1},...

并在重置功能上将其设置为1：

_reset() {
    this.set('selected', 1);  // 
    this.$.form1.reset();
}

提交表单数据时，可以使用Polymer属性来使用所选属性。