使用JavaScript设置HTML5输入列表值

Question

我将通过JavaScript创建一个带有附加datalist的html5输入字段.我在创建这些dom节点时没有任何问题,但是我在list使用纯JavaScript 设置属性值时遇到了问题.这可能吗？我已经检查了节点的功能和值list,但每当我尝试设置它时,都没有分配新的值.有人有什么想法吗？

这是代码中的一个例子.

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,没有财产直接设置attridute.所以看起来你已经被困住了setAttribute()

您还应该注意到DOM操作带来了一些性能上的优点,所以最好将它们最小化.您可能需要考虑以下事项:

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;

演示