使用JavaScript设置HTML5输入列表值

set HTML5 input list value with JavaScript

本文关键字：列表 输入 HTML5 JavaScript 设置 使用      更新时间：2023-09-26

我要通过JavaScript创建一个带有附加数据的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';的语法中执行此操作?

提前感谢!

根据MDN，没有直接设置该属性的属性。看起来你只能用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;
演示

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

相关文章：