📌  相关文章
📜  select2 预选选项 - Javascript (1)

📅  最后修改于: 2023-12-03 15:20:03.830000             🧑  作者: Mango

在 select2 中使用预选选项

简介

在使用 select2 插件时，我们经常需要让一些选项预先选中，以便在页面加载后显示一些默认值或者根据后台数据动态选中一些选项。本文将介绍如何在 select2 中使用预选选项。

实现步骤
  1. 引入 select2 插件

在开始之前，我们需要先引入 select2 插件。可以从官网上下载最新版，也可以使用 cdn 引入。下面是 cdn 引入的示例：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
  1. HTML 结构

在 HTML 中，我们需要定义一个 select 元素，并添加一些 option 元素。这里添加了 4 个选项，其中 "Option 2" 和 "Option 4" 已经被预选中。

<select id="mySelect" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
  <option value="4" selected>Option 4</option>
</select>
  1. 使用 select2 插件

在 JavaScript 中，使用 select2 插件对上面的 select 元素进行初始化，并指定一些选项。这里设置了 multiple 属性为 true，以支持多选，同时设置了 placeholder 属性和 allowClear 属性，以提升用户体验。

$('#mySelect').select2({
  placeholder: 'Select an option',
  allowClear: true,
  theme: 'classic',    // 设置主题，可以选择其他主题
  minimumResultsForSearch: Infinity    // 隐藏搜索框
});
  1. 预选选项

如果需要在页面加载后预选一些选项，可以使用选项中的 selected 属性。select2 插件会自动识别这些选项，并将它们设为选中状态。

<option value="2" selected>Option 2</option>
<option value="4" selected>Option 4</option>
示例代码

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Select2 Preselected Options</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" rel="stylesheet" />
</head>
<body>
  <select id="mySelect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
    <option value="4" selected>Option 4</option>
  </select>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').select2({
        placeholder: 'Select an option',
        allowClear: true,
        theme: 'classic',
        minimumResultsForSearch: Infinity
      });
    });
  </script>
</body>
</html>
总结

本文介绍了在 select2 中使用预选选项的方法，即通过在 option 中添加 selected 属性实现。同时，本文还演示了如何使用 select2 插件，并设置了一些常用的选项。通过本文的介绍，相信读者已经可以轻松应对 select2 中预选选项的需求。