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