HTML <select> multiple 属性

在网页开发中，<select> 元素是用来创建下拉菜单的标签。它允许用户从预定义的选项中选择一个值。而通过添加 multiple 属性，可以让用户选择多个值，而不仅限于单选。

使用方法

要在 <select> 元素中启用多选功能，只需要在该元素中添加 multiple 属性即可。例如：

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

上面的代码片段中，<select> 元素拥有 multiple 属性，因此用户可以同时选择多个选项。

效果展示

当用户打开上述代码片段所在的网页时，会看到一个下拉菜单，其中列出了 Apple、Banana 和 Orange 三个选项。用户可以按住 Ctrl 键（在 Windows 系统中）或 Command 键（在 macOS 系统中）来进行多选。选中的选项会用不同的方式显示，以示区分。

注意事项

在使用 <select> 元素的 multiple 属性时，有一些需要注意的事项：

1. 用户可以通过按住 Ctrl（或 Command）键来多选。
2. 可以通过 JavaScript 来获取用户选择的值。
3. 用户体验可能会受到影响，因为多选下拉菜单不如单选下拉菜单那么直观。
4. 在移动设备上，多选下拉菜单的使用可能会有一些局限性，因此需要谨慎考虑是否使用多选功能。

示例代码

下面是一个更完整的示例代码，包含了样式和 JavaScript 部分：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <style>
    select {
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <select id="fruits" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </select>
  
  <button onclick="getSelectedFruits()">Get Selected Fruits</button>
  
  <script>
    function getSelectedFruits() {
      var selectElement = document.getElementById("fruits");
      var selectedFruits = [];
      for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
          selectedFruits.push(selectElement.options[i].value);
        }
      }
      alert("Selected fruits: " + selectedFruits.join(", "));
    }
  </script>
</body>
</html>

在上面的示例中，我们定义了一个样式，设置了 <select> 元素的宽度和高度。同时，我们还添加了一个按钮，当用户点击该按钮时，会调用 JavaScript 函数 getSelectedFruits()，该函数会获取用户选择的水果，并弹出一个提示框显示所选水果的值。

希望本文对你理解 HTML <select> 元素的 multiple 属性有所帮助！