使用 JavaScript 设置 HTML5 输入列表值

Question

我将通过 JavaScript 创建一个带有附加数据列表的 html5 输入字段。我在创建这些 dom 节点时没有任何问题，但是我在使用纯 JavaScript 设置 list 属性值时遇到了麻烦。这可能吗？我检查了节点的功能并且list 的值在那里，但是每当我尝试设置它时，都不会分配新值。有人有什么想法吗？

Here 是代码示例。

var _form = document.body.appendChild(document.createElement('form')),
    _input = _form.appendChild(document.createElement('input')),
    _datalist = _form.appendChild(document.createElement('datalist'));

_input.list = 'exampleList';
_input.datalist_id = 'exampleList';
_input.className = 'getme';

_datalist.id = 'exampleList';

for (var i = 0; i < 5; i++) {
    var _option = _datalist.appendChild(document.createElement('option'));
    switch(i){
        case i:
            _option.value = i;
            break;
    };
};

编辑

我找到了一种通过element.setAttribute(); 方法执行此操作的方法。如何使用类似于（例如）element.className = 'value'; 的语法来执行此操作。

提前谢谢你！

Answer 1

根据MDN，没有属性可以直接设置该属性。所以看起来你被setAttribute()卡住了

您还应该注意DOM manipulations come with some performance ovehead，因此有时最好将它们最小化。您可能需要考虑以下几点：

var _form = document.body.appendChild(document.createElement('form')),
    _input = _form.appendChild(document.createElement('input')),
    _datalist = _form.appendChild(document.createElement('datalist'));


_datalist.id = 'exampleList';
_input.setAttribute('list','exampleList');

var _option = "";
for (var i = 0; i < 5; i++) {
    _option += "<option value='" + i + "' />";
};

_datalist.innerHTML = _option;

Demo

Answer 2

使用 setAttribute() ：

  var _form = document.body.appendChild(document.createElement('form')),
    _input = _form.appendChild(document.createElement('input')),
    _datalist = _form.appendChild(document.createElement('datalist'));

_input.setAttribute('list','exampleList')
_input.datalist_id = 'exampleList';

_datalist.id = 'exampleList';

for (var i = 0; i < 5; i++) {
    var _option = _datalist.appendChild(document.createElement('option'));
    _option.text =i;   
};

小提琴：http://jsfiddle.net/bkTxM/2/