如何使用 dom-repeat 设置下拉值

Question

如果满足特定条件，我正在尝试 select 第二个选项形成下拉列表，selectedIndex

有问题

<select id="contact" on-change="selectContact">
  <option  value="-1" selected>Select Contact</option>
  <template is="dom-repeat" items="[[contacts]]" as="contact" index-as="index">
     <option value="[[contact]]">[[contact]]</option>
  </template>
</select>

<select id="name" on-change="selectName">
  <option  value="-1" selected>Select Name</option>
    <template is="dom-repeat" items="[[names]]" as="name">
      <option value="[[name]]">[[name]]</option>
    </template>
</select>

...

selectContact() {
  for (let i = 0; i < this.customerTable[0].length; i++) {
    if(true) {
        array[i] = this.customerTable[0][i]['name'];
      }
  }
  this.names = this.$.util.utilFn(array);


  if(this.names.length == 1) {
    this.shadowRoot.querySelector('#name').selectedIndex = 2;
  }

}

如何 select dom 重复下拉列表的第二个子项？

Answer 1

在 selectContact() 中，您正在设置 this.names（第二个 <dom-repeat>.items 绑定）并立即尝试 select [=] 的第一项14=] 在 DOM 实际更新之前。

您实际上需要等到 Polymer.RenderStatus.afterNextRender() 的下一个渲染帧，然后才能 select 编辑项目：

selectContact() {
  this.names = ['John'];

  if (this.names.length === 1) {
    Polymer.RenderStatus.afterNextRender(this, () => {
      this.shadowRoot.querySelector('#name').selectedIndex = 1;
    });
  }
}

demo

如何使用 dom-repeat 设置下拉值

How to Set Dropdown Value with dom-repeat

polymer

polymer-2.x

dom-repeat