Question

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

为此，我想采取的第一步是我想知道如何动态地将javascript数组用作数据列表选项。

我的代码是：

<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选项，但dxnamic取决于数组长度

Answer 1

这是一个古老的问题并且已经得到了充分的回答，但无论如何，对于那些不喜欢使用文字HTML的人来说，我都会把DOM方法抛到这里。

<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>

Here's the fiddle

Answer 2

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

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

<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>

Answer 3

如果您使用ES6，您可以这样做，这是使用ES6语法的Paul Walls技术。

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>

Answer 4

你可以用jQuery方式做 - 但另一方面，既然你正在处理服务器上的数据，你可以直接在那里生成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/

Answer 5

一种更高效的方法是使用fragment。

动态地将选项元素附加到<datalist>上，但不要添加列表中的每个项目，而应使用片段以避免重排并将它们仅一次呈现到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>

javascript中数组的Html datalist值

5 个答案: