Html javascript中数组中的Html数据列表值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17929356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html datalist values from array in javascript
提问by Zeeshan
I have a simple program which has to take the values from the text file on server and then populate on the datalist as the selection in the input text field.
我有一个简单的程序，它必须从服务器上的文本文件中获取值，然后作为输入文本字段中的选择填充到数据列表中。
For this purpose the first step i want to take is that i want to know that how the array of javascript can be used as a datalist options dynamically.
为此，我想采取的第一步是我想知道如何将 javascript 数组动态用作数据列表选项。
My Code is :
我的代码是：
<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>
I want to populate the input text field containing the datalist as suggestion from the array. Also here I havenot take into account the array values. Actually i need not two datalist options but dxnamic depending on the array length
我想填充包含数据列表的输入文本字段作为数组中的建议。同样在这里我没有考虑数组值。实际上，我不需要两个数据列表选项，而是需要 dxnamic 取决于数组长度
回答by Paul Walls
This is an old question and already sufficiently answered, but I'm going to throw the DOM method in here anyway for anyone that doesn't like to use literal HTML.
这是一个老问题，已经得到了充分的回答，但无论如何，对于不喜欢使用文字 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>
回答by Andre Calil
I'm not sure if I understood your question clearly. Anyway, try this:
我不确定我是否清楚地理解了你的问题。无论如何，试试这个：
<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>
回答by realappie
If you are using ES6 you could do it this way, this is Paul Walls techniques with ES6 syntax.
如果您使用的是 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>回答by daxur
You can do it jQuery way - but on the other hand, since you are processing data on the server, you might generate HTML directly there (just a suggestion).
你可以用 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>
Here's a JSFiddle with this code so you can immediatelly try it: http://jsfiddle.net/mBMrR/
这是带有此代码的 JSFiddle，因此您可以立即尝试：http: //jsfiddle.net/mBMrR/
