使用jQuery通过多维数组提供`<option>`元素到`<datalist>`

Question

我已经搜索了帖子，找到了我想要做的解决方案。我想使用JavaScript数组创建一个<datalist>的列表。我发现了一个for循环，为其他人工作，我稍微修改它以适应二维数组。我在JSFiddle上使用了下面的代码，它可以工作，但是当我将它包含到我的更大的代码中时，即使代码被简单地复制并粘贴到我的较大代码中，现在也会显示<datalist>。

此外，我不确定如何将下面的代码更改为jQuery，如果您可以提供帮助，我将非常感谢。

var test = [ 
 
    ['text1',1,2,3,4], 
 
    ['text2',1,2,3,4], 
 
    ['text3',1,2,3,4], 
 
    ['text4',1,2,3,4], 
 
    ['text5',1,2,3,4], 
 
    ['text6',1,2,3,4], 
 
    ['text7',1,2,3,4], 
 
]; 
 

 
var options = ''; 
 

 
for(var i = 0; i < test.length; i++) { 
 
    options += '<option value="'+test[i][0]+'" />'; 
 
    document.getElementById('maltList').innerHTML = options; 
 
}

<input name ="malt" list="maltList"/> 
 
<datalist id="maltList"></datalist>

Answer 1

可以使用jQuery#append方法（使用Array#map您test阵列从数据映射）添加的选项列表您datalist。既然你以前的代码是作为一个片段工作的，但我不确定这是否会在以前失败的任何环境中帮助你。

让我知道如果您收到任何错误消息，我会尽力帮助您解决它们。

var test = [ 
 
    ['text1',1,2,3,4], 
 
    ['text2',1,2,3,4], 
 
    ['text3',1,2,3,4], 
 
    ['text4',1,2,3,4], 
 
    ['text5',1,2,3,4], 
 
    ['text6',1,2,3,4], 
 
    ['text7',1,2,3,4], 
 
] 
 

 
$('#maltList').append(test.map(function (e) { 
 
    return new Option(e[0]) 
 
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name ="malt" list="maltList"/> 
 
<datalist id="maltList"></datalist>