dart - DART-以编程方式将数据列表设置为TextInputElement

Question

我正在尝试将此代码段HTML5代码转换为DART:

        <input type="text" list="zoompercent">
          <datalist id="zoompercent" >
             <option>25%
             <option>50%
             <option>75%
             <option>100%
             <option>150%
             <option>200%
             <option>300%
             <option>400%
          </datalist>

我可以实例化输入字段为

    TextInputElement zoomPresets = new TextInputElement();

我也可以实例化数据列表为:

    DataListElement presetDataList = new DataListElement();
    OptionElement option1 = new OptionElement();
    option1.value="25%"; 
    presetDataList.children.add(option1);
...

但是，如何将 presetDataList设置为 zoomPresets的列表？ zoomPresets.list是最终的。

请告知。

Answer 1

只需设置列表属性:

import 'dart:html';

main () {
  TextInputElement zoomPresets = new TextInputElement();

  DataListElement presetDataList = new DataListElement()..id="presetDataList";
     OptionElement option1 = new OptionElement();
     option1.value="25%";
     presetDataList.children.add(option1);

     zoomPresets.attributes['list'] = presetDataList.id;

     document.body.append(zoomPresets);
     document.body.append(presetDataList);
}