Polymer 实现原生 select 元素

Question

我正在使用带选项的原生 select 实现聚合物自定义元素。

<select id="selectbox" value="{{selectedId::change}}">
  <template is="dom-repeat" items="{{arrayItems}}" >
    <option value="{{item}}" id="{{item}}">{{item}}</option>
  </template>
</select>

https://jsfiddle.net/fiddle_gabriela/a58L52yh/2/

selectedId 表示要在 select 框中 select 编辑的项目的 ID
（第一个元素为 1，第二个元素为 2，依此类推）。

在创建 select 框时，我想 select 列表中的第 4 个元素。
问题是 selectedId 获取元素的值（例如 admission、alert、...）而不是它的 id。

如何获取id而不是value？

更新预期结果（来自评论）

<select> 
  <option value="admission">admission</option> 
  <option value="alert">alert</option> 
  <option value="bvt_sample">bvt_sample</option> 
  <option value="clinicalpath" selected > clinicalpath</option> 
</select>

Answer 1

您可以使用一个函数来检查当前项目是否与实际选择的项目相同。

<option value="{{item}}" id="{{item}}" selected="{{isSelected(item)}}">

isSelected: function(item) {
  console.log(item);
    return item === this.selectedId;
}

https://jsfiddle.net/zkrb4jkz/

Polymer 实现原生 select 元素

Polymer implement native select element

select

element

native

polymer