javascript - 使用 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