在JavaScript中，将数组的值用HTML datalist表示

Question

在JavaScript中，将数组的值用HTML datalist表示

34

我有一个简单的程序，它必须从服务器上的文本文件中获取值，然后将datalist填充为输入文本字段中的选择项。

为了实现这个目的，我想要采取的第一步是知道如何使用JavaScript数组作为动态的datalist选项。

我的代码是：

<html>
<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
  <option value= mycars[0]></option>
  <option value="Frau"></option> 
</datalist>
</html>

我想要通过数组中的建议填充输入文本字段，包含datalist。同时，我还没有考虑到数组的值。实际上，我不需要两个datalist选项，而是任意数量（取决于数组的长度）。

- Zeeshan

7个回答

31

我不确定我是否清楚地理解了你的问题。无论如何，请尝试这个：

var mycars = new Array();
mycars[0] = 'Herr';
mycars[1] = 'Frau';

var options = '';

for (var i = 0; i < mycars.length; i++) {
  options += '<option value="' + mycars[i] + '" />';
}

document.getElementById('anrede').innerHTML = options;

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

- Andre Calil

谢谢你的回答，是的，它可以工作，但我想再问一个关于概念的问题。当我尝试以下代码时：<html> <head> <script type="text/javascript"> var mycars = new Array(); mycars[0]='Herr'; mycars[1]='Frau'; var options = ''; for(var i = 0; i < mycars.length; i++) options += '<option value="'+mycars[i]+'" />'; document.getElementById('anrede').innerHTML = options; </script> </head> <body> <input name="name" list="anrede" /> <datalist id="anrede"></datalist> </body> </html> 它没有起作用，那么错在哪里呢？ - Zeeshan

1

这是因为没有创建 datalist 对象，而我正在通过未创建的 id 获取它。 - Zeeshan

3

无法正常工作是因为脚本放在元素之前。它在整个页面之前被解析和处理。 - Andre Calil

2

@Zeeshan 没问题。我们总得从某个地方开始，对吧？=) - Andre Calil

18

如果您正在使用ES6，您可以按照Paul Walls的技巧以ES6语法进行操作。

const list = document.getElementById('anrede'); 

['Herr','Frau'].forEach(item => {
  let option = document.createElement('option');
  option.value = item;   
  list.appendChild(option);
});

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

- realappie

5

还有一个构造函数可以创建一个选项：new Option()

const
  dtl_anrede = document.getElementById('anrede')
, myCars     = ['Herr', 'Frau']
  ;

myCars.forEach(car => dtl_anrede.appendChild(new Option('', car)))

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

- Mister Jojo

3

您可以使用jQuery的方式来实现-但另一方面，由于您正在服务器上处理数据，因此建议直接在服务器上生成HTML。请注意保留HTML标记。

<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

$(document).ready( function() {
    $(mycars).each( function(index, item) {
        var option = $('<option value="'+item+'"></option>');
        $('#anrede').append(option);
    });
});

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
    <!-- options are filled in the script -->
</datalist>

这是一个包含代码的JSFiddle链接，你可以立即尝试： http://jsfiddle.net/mBMrR/

- daxur

当我执行它时，它会显示引用错误，即ReferenceError: $未定义。 - Zeeshan

你需要下载并将jQuery包含到你的项目中。 - daxur

是的，现在它可以工作了...谢谢。还有一件事，你能描述一下你的建议“你可能直接在那里生成HTML（只是一个建议）”吗？ - Zeeshan

你是如何生成你的HTML代码的？使用哪种技术？ PHP，ASP.NET等？除非你手动编写HTML代码，否则您现在可以忽略我的建议 ;) - daxur

是的，我已经手动编写了它，只有服务器端所需的工作由 Perl 完成。所以请忽略 :D。 - Zeeshan

2

更高效的方法是使用 fragment。

动态将选项元素附加到 <datalist>，但不是添加列表中的每个项目，而是使用 fragment 避免回流，并将它们渲染到 DOM 中仅一次。

var datalist = document.getElementById('anrede');
var fragment = document.createDocumentFragment();

var myCars = ['Herr', 'Frau'];

// Prepare the option elements to be rendered.
myCars.forEach(function(car) {
  var option = document.createElement('option');
  var text = document.createTextNode(car);

  option.value = car;
  option.appendChild(text);
  fragment.appendChild(option);
});

// Append all of them to DOM.
datalist.appendChild(fragment);

<input name="anrede" list="anrede" />
<datalist id="anrede"></datalist>

- kabirbaidhya

1

const datalist = document.getElementById('anrede');
for (const item of myCars) 
  datalist.appendChild(new Option(null,item));

这是最高效和简洁的方法。

- Enceladus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Walls · Accepted Answer

这是一个旧问题，已经得到足够的回答，但我仍然想把DOM方法放在这里，以便于那些不喜欢使用字面HTML的人使用。

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

<script>
var mycars = ['Herr','Frau'];
var list = document.getElementById('anrede');

mycars.forEach(function(item){
   var option = document.createElement('option');
   option.value = item;
   list.appendChild(option);
});
</script>

这里是 fiddle.