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

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

polymer javascript

Yanko Ojeda · 技术社区 · 7 年前

示例代码:

<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 回复 | 直到 7 年前

Lukasz Matysiak 7 年前

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

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

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

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

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

Cappittall 7 年前

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

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前