从 datalist 动态创建 javascript 数组 - Javascript

在Javascript中，我们可以利用HTML5的<datalist>元素来收集一组选项，然后从中动态创建一个Javascript数组。

1. HTML5 datalist 标签

在HTML5中，我们可以使用<datalist>标签来定义可选项的列表，该标签必须结合<input>元素一起使用。

下面是一个简单的示例：

<label for="myInput">选择一个水果:</label>
<input list="fruits" id="myInput" name="myInput">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="橙子">
  <option value="芒果">
</datalist>

2. 动态创建Javascript数组

在HTML中，datalist标签中的值可以用javascript进行访问。 我们可以使用以下步骤来动态创建Javascript数组。

首先，获取datalist元素：

const dataList = document.getElementById('fruits');

然后，使用<option>标记的value属性将所有选项添加到一个数组中:

const options = [...dataList.options].map((option) => option.value);

该数组现在包含['苹果', '香蕉', '橙子', '芒果']。

完整的示例代码：

<label for="myInput">选择一个水果:</label>
<input list="fruits" id="myInput" name="myInput">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="橙子">
  <option value="芒果">
</datalist>

<script>
  const dataList = document.getElementById('fruits');
  const options = [...dataList.options].map((option) => option.value);
  console.log(options); // ['苹果', '香蕉', '橙子', '芒果']
</script>

3. 结论

使用datalist标签，我们可以轻松地从可选项动态创建Javascript数组，这在实现诸如自动完成之类的功能时是非常有用的。

参考链接：MDN Docs - HTML5 datalist 元素