如何重設鐵框內的下拉菜單？

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屬性來使用所選屬性。