jQueryを使用して多次元配列を介して `<option>`要素を '<datalist>'

Question

に提供しました。私が何をしたいのかの解決策を見つけるために投稿を検索しました。 JavaScriptアレイを使用して<datalist>のリストを作成したいと思います。私は他の誰かのために働くforループを見つけました。そして、それを2D配列で動作させるために少し修正しました。私は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

あなたのdatalistに（Array#mapを使用してtest配列内のデータからマッピングされた）オプションのリストを追加するjQuery#appendメソッドを使用することができます。あなたが以前に持っていたコードはスニペットとして働いていたので、以前は失敗した文脈で実際に役立つかどうかはわかりません。

エラーメッセージが表示された場合は教えてください。私はエラーメッセージを解決するのを手伝ってくれます。結果が期待される何

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>