📅 最后修改于: 2023-12-03 15:08:47.978000 🧑 作者: Mango
Select2 是一个 jQuery 插件，它可以将原生的 <select> 元素转换成功能更强大、交互更友好的下拉列表组件。而它的样式可以通过选择不同的主题来进行定制。本文将介绍如何在 Select2 中设置经典主题。
要使用 Select2，首先需要引入相应的库文件。可以从它的官方网站 https://select2.org/ 下载最新版本的库文件，或者通过 NPM、Yarn 等包管理工具进行安装。以下代码演示如何通过 CDN 引入最新版的 Select2 库：
<!DOCTYPE html>
<html>
<head>
<title>Select2 Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<script>
$(document).ready(function() {
$('select').select2();
});
</script>
</body>
</html>
要设置经典主题，需要引入相应的 CSS 样式文件。同样可以从官方网站下载，或者通过包管理工具进行安装。以下代码演示如何通过 CDN 引入经典主题的 CSS 样式：
<!DOCTYPE html>
<html>
<head>
<title>Select2 Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2-classic.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<script>
$(document).ready(function() {
$('select').select2({
theme: 'classic'
});
});
</script>
</body>
</html>
如上代码中，通过引入经典主题的 CSS 样式文件，并在初始化 Select2 时将 theme 参数设为 classic，就可以启用经典主题了。可以通过相应的 CDN 或下载到本地使用。
通过以上方法，就可以在 Select2 中启用经典主题，让下拉列表组件的样式更加美观和符合传统设计。当然，在 Select2 中还有很多自带的主题和自定义主题可以选择。如果想要了解更多，可以查看 Select2 的官方文档：https://select2.org/。