代码之家 › 专栏 › 技术社区 › Yanko Ojeda

如何在熨斗窗体内重置纸张下拉菜单?

polymer javascript

Yanko Ojeda · 技术社区 · 6 年前

示例代码:

<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();
}

单击“重置”按钮时,下拉列表未设置为其默认值。

2 回复 | 直到 6 年前

Lukasz Matysiak 6 年前

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

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

没有魔法 iron-form 恐怕我可以在这里表演,所以我会延长 _reset 方法:

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

当然,您也可以直接参考列表框。

Cappittall 6 年前

可以为选定属性使用变量:

 <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();
}

这是一种在提交表单数据时可以使用选定属性的方式。

推荐文章

Kuba Å imonovský · Templatizer-如何多次渲染同一模板,Polymer 2。十、

6 年前

Riposte · 从单元渲染器迁移Vaadin网格聚合物元素

6 年前

AlexBenoit · 聚合物2条件属性

6 年前

Nikhil Raghavendra · Polymer 2.0数据绑定不工作

6 年前

user3310115 · 如何结合铁计时器和力矩js在聚合物中显示hh:mm:ss格式

6 年前

Yanko Ojeda · 如何在熨斗窗体内重置纸张下拉菜单?

6 年前

Matthew · 如何解决iron ajax响应延迟问题

6 年前

yberg · 使用nginx反向代理服务聚合物PWA

6 年前

Mason · 如何要求服务人员忽略与Polymer中特定URL模式匹配的请求?

6 年前

Yairopro · Web组件未显示

6 年前