28

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

为此，我要采取的第一步是我想知道如何将 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 选项，而是 dxnamic 取决于数组长度

4

6 回答 6

41

这是一个老问题，已经得到了充分的回答，但是对于不喜欢使用文字 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>

这是小提琴。

于 2016-02-18T02:44:36.683 回答
29

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

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>

于 2013-07-29T16:45:31.070 回答
15

如果你使用 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>

于 2017-05-03T10:46:16.873 回答
2

你可以用 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/

于 2013-07-29T16:50:34.733 回答
1

一种更高效的方法是使用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>

于 2020-09-20T12:00:21.817 回答
1

还有一个构造函数来创建一个选项：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>

于 2021-08-26T15:04:54.760 回答