当前位置：首页 > 行业动态 > 正文

html datalist标签如如何多选

admin
行业动态
2024-04-04
4419

HTML的<datalist>标签用于为<input>元素提供预定义的选项，原生的<datalist>标签并不支持多选功能，我们可以通过一些技巧来实现多选的效果，下面我将详细介绍如何实现这个功能。

我们需要创建一个<datalist>标签，并在其中添加一些预定义的选项。

<input list="fruits" name="fruits">
<datalist id="fruits">
  <option value="apple">
  <option value="banana">
  <option value="orange">
</datalist>

在这个例子中，我们创建了一个名为fruits的<datalist>标签，并为其添加了三个预定义的选项：苹果、香蕉和橙子，我们将这个<datalist>标签与一个<input>元素关联起来，使其能够显示预定义的选项。

接下来，我们需要使用JavaScript来实现多选功能，我们可以监听<input>元素的change事件，当用户选择一个选项时，将其添加到一个数组中，我们需要监听<datalist>元素的input事件，当用户输入一个字符时，过滤出包含该字符的所有选项，并将它们添加到一个临时数组中，我们需要将临时数组中的选项添加到最终的选项数组中。

以下是实现这个功能的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>HTML Datalist多选示例</title>
  <style>
    .selected {
      backgroundcolor: #f0f0f0;
    }
  </style>
</head>
<body>
  <input list="fruits" name="fruits" multiple>
  <datalist id="fruits">
    <option value="apple">
    <option value="banana">
    <option value="orange">
  </datalist>
  <script>
    const input = document.querySelector('[list="fruits"]');
    const datalist = document.getElementById('fruits');
    const options = [];
    let tempOptions = [];
    input.addEventListener('input', () => {
      tempOptions = Array.from(datalist.options).filter(option => option.textContent.includes(input.value));
      renderOptions();
    });
    input.addEventListener('change', () => {
      const selectedIndex = tempOptions.findIndex(option => option.value === input.value);
      if (selectedIndex !== 1) {
        options[selectedIndex] = true;
        tempOptions[selectedIndex].classList.add('selected');
      } else {
        options.push(true);
        tempOptions.forEach(option => option.classList.remove('selected'));
        tempOptions.push(...Array.from(datalist.options).filter(option => option.textContent === input.value));
      }
      renderOptions();
    });
    function renderOptions() {
      tempOptions.forEach(option => {
        if (options[tempOptions.indexOf(option)]) {
          option.classList.add('selected');
        } else {
          option.classList.remove('selected');
        }
      });
    }
  </script>
</body>
</html>

在这个示例中，我们首先创建了一个名为fruits的<datalist>标签，并为其添加了三个预定义的选项：苹果、香蕉和橙子，我们将这个<datalist>标签与一个<input>元素关联起来，使其能够显示预定义的选项，我们为这个<input>元素添加了multiple属性，使其支持多选功能。

接下来，我们使用JavaScript来监听<input>元素的change和input事件，当用户选择一个选项时，我们将其添加到一个名为options的数组中，我们会过滤出包含用户输入值的所有选项，并将它们添加到一个名为tempOptions的临时数组中，我们会将临时数组中的选项添加到最终的选项数组中，为了实现这个功能，我们还需要编写一个名为renderOptions的函数，用于根据选项数组的状态更新页面上的选项样式。