Zee*_*han 17 javascript arrays html5 html-datalist
我有一个简单的程序,它必须从服务器上的文本文件中获取值,然后填充在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取决于数组长度
Pau*_*lls 31
这是一个老问题并且已经得到了充分的回答,但是对于那些不喜欢使用文字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>
And*_*lil 19
我不确定我是否清楚地理解你的问题.无论如何,试试这个:
<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>
rea*_*pie 11
如果您使用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>还有一个创建选项的构造函数：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>