bootstrap 多选获取选定值

水果

使用Bootstrap多选功能获取选定值

在网页开发中，经常需要使用到表单控件来收集用户的输入信息。而对于一些需要多选的选项，Bootstrap提供了便捷的解决方案。通过使用Bootstrap的多选功能，我们可以方便地获取用户所选的值，并进行相应的处理。

为了更好地理解和应用Bootstrap的多选功能，下面将结合一个实际的案例来进行介绍和演示。在这个案例中，我们将创建一个简单的表单，其中包含一个多选框，用户可以选择自己喜欢的水果。

首先，在HTML文件中引入Bootstrap的样式文件和相关的JavaScript文件。在这里，我们使用最新版本的Bootstrap 5。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Multiple Select</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.1.3/dist/CSS/bootstrap.min.CSS">
</head>
<body>
  <div class="contAIner">
    <h1>Bootstrap Multiple Select</h1>
    <form>
      <div class="form-group">
        <label for="fruits">请选择您喜欢的水果：</label>
        <select multiple class="form-control" id="fruits">
          <option>苹果</option>
          <option>香蕉</option>
          <option>橙子</option>
          <option>草莓</option>
          <option>葡萄</option>
        </select>
      </div>
      <button type="button" class="btn btn-primary" onclick="getSelectedFruits()">提交</button>
    </form>
  </div>
  <script src="https://cdn.JSdelivr.net/npm/bootstrap@5.1.3/dist/JS/bootstrap.bundle.min.JS"></script>
  <script>
    function getSelectedFruits() {
      var selectedFruits = [];
      var fruitsSelect = document.getElementById("fruits");
      for (var i = 0; i < fruitsSelect.options.length; i++) {</p>        if (fruitsSelect.options[i].selected) {
          selectedFruits.push(fruitsSelect.options[i].value);
        }
      }
      alert("您选择的水果是：" + selectedFruits.join(", "));
    }
  </script>
</body>
</html>

在上述代码中，我们首先创建了一个包含多选框的表单。通过添加 multiple 属性，我们告诉浏览器该选择框允许多选。每个选项都被包含在 标签中。

为了获取用户选择的值，我们为提交按钮添加了一个点击事件处理函数 getSelectedFruits()。在该函数中，我们首先定义了一个空数组 selectedFruits 用于存储用户选择的水果。

接下来，我们通过 getElementById() 方法获取到多选框的DOM对象，并通过遍历每个选项，判断是否被选中。如果某个选项被选中，我们将其值添加到 selectedFruits 数组中。

最后，我们通过 alert() 方法弹出一个提示框，显示用户选择的水果。

通过以上的代码和说明，我们可以实现一个基于Bootstrap的多选功能，并获取用户所选的值。这为我们在网页开发中收集和处理用户输入提供了便利。