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

Posted 2023-05-09

【中文标题】使用 jQuery 通过多维数组将 `<option>` 元素提供给 `<datalist>`

【英文标题】：Using jQuery to supply `<option>` elements via multidimensional array to `<datalist>`

【发布时间】：2017-07-27 05:35:27

【问题描述】：

我已经搜索了帖子以找到我想做的解决方案。我想使用 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>

【问题讨论】：

预期结果是什么？

【参考方案1】：

您可以使用jQuery#append 方法将选项列表（使用Array#map 从test 数组中的数据映射）到您的datalist。但是，由于您之前的代码是作为 sn-p 工作的，我不确定这是否真的会在之前失败的任何情况下对您有所帮助。

如果您收到任何错误消息，请告诉我，我会尽力帮助您解决这些问题。

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>

【讨论】：

感谢您的帮助。 “e”有什么作用？

选择输入框时下拉菜单不存在。

e 只是被迭代数组元素的简写。不知道您所说的下拉菜单不存在是什么意思