如何重置iron-form组件中的paper-dropdown-menu？

我经常碰到这个问题——iron-form的默认reset()方法对原生表单元素很友好，但对paper-dropdown-menu这类自定义Polymer元素就没那么贴心了，因为它不会自动同步下拉菜单的内部选中状态。下面给你两种靠谱的解决办法：

方法一：手动同步下拉菜单状态（快速简单） #

这种方法直接在重置按钮的点击事件里，先调用iron-form的重置，再手动把dropdown设回默认值，适合小场景快速解决。

示例代码 #

HTML部分

<iron-form id="myForm">
  <form>
    <!-- 给dropdown设置name，初始selected设为默认选项的索引 -->
    <paper-dropdown-menu name="category" label="Choose Category">
      <paper-listbox slot="dropdown-content" selected="0">
        <paper-item value="default">Default Option</paper-item>
        <paper-item value="optionA">Option A</paper-item>
        <paper-item value="optionB">Option B</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>

    <paper-button on-click="handleReset">Reset Form</paper-button>
  </form>
</iron-form>

JavaScript部分

function handleReset() {
  const form = document.getElementById('myForm');
  // 先触发iron-form的默认重置，把表单数据清回初始状态
  form.reset();

  // 找到对应的paper-dropdown-menu元素
  const dropdown = form.querySelector('paper-dropdown-menu[name="category"]');
  // 重置value为默认值，同时同步内部listbox的选中索引
  dropdown.value = 'default';
  dropdown.querySelector('paper-listbox').selected = 0;
}

方法二：扩展dropdown元素，让它支持iron-form自动重置（优雅持久） #

如果你的项目里有很多需要重置的dropdown，手动重置太繁琐，可以扩展paper-dropdown-menu，给它加一个reset()方法，这样iron-form调用reset()时会自动触发这个方法，一劳永逸。

示例代码 #

扩展元素的JS

// 等待paper-dropdown-menu定义完成后扩展它
customElements.whenDefined('paper-dropdown-menu').then(() => {
  const OriginalDropdown = customElements.get('paper-dropdown-menu');
  
  class ResettableDropdown extends OriginalDropdown {
    constructor() {
      super();
      // 初始化时保存初始值和选中索引
      this._initialValue = this.value;
      this._initialSelected = this.querySelector('paper-listbox')?.selected || 0;
    }

    // 自定义reset方法，会被iron-form自动调用
    reset() {
      this.value = this._initialValue;
      const listbox = this.querySelector('paper-listbox');
      if (listbox) listbox.selected = this._initialSelected;
    }
  }

  // 注册自定义的可重置dropdown元素
  customElements.define('resettable-paper-dropdown-menu', ResettableDropdown);
});

使用自定义元素的HTML

<iron-form id="myForm">
  <form>
    <!-- 用我们自定义的resettable-paper-dropdown-menu -->
    <resettable-paper-dropdown-menu name="category" label="Choose Category">
      <paper-listbox slot="dropdown-content" selected="0">
        <paper-item value="default">Default Option</paper-item>
        <paper-item value="optionA">Option A</paper-item>
        <paper-item value="optionB">Option B</paper-item>
      </paper-listbox>
    </resettable-paper-dropdown-menu>

    <!-- 现在直接调用form.reset()就可以完成全表单重置 -->
    <paper-button on-click="() => document.getElementById('myForm').reset()">Reset Form</paper-button>
  </form>
</iron-form>

为什么会出现这个问题？ #

iron-form的reset()方法是基于原生HTML表单的重置逻辑实现的，它只会处理原生表单元素（如<input>、<select>）的value属性。而paper-dropdown-menu是自定义元素，它的选中状态存在内部<paper-listbox>的selected属性里，和原生表单的重置逻辑没有绑定，所以默认情况下不会自动重置。

内容的提问来源于stack exchange，提问作者Yanko Ojeda