用例子解释 Chosen 和 Select2

Chosen 和 Select2 都是用于美化下拉框的 JavaScript 插件。它们可以通过 AJAX 加载选项、搜索选项、多选等功能来增强用户体验。

Chosen

Chosen 是一种基于 jQuery 的插件，可帮助您优化选择框。

安装

使用 npm 进行安装：

npm install chosen-js

或者，从官方网站下载源代码。将 chosen.jquery.js 和 chosen.css 包含在您的网页中即可。

选项

以下是一些 Chosen 支持的选项：

• disable_search：当设置为 true 时，搜索框将被禁用。
• multiple：当设置为 true 时，可多选。
• max_selected_options：限制可选择的最大选项数。
• width：下拉框的宽度，可以是数字、字符串，也可以是 CSS 选择器。

示例

以下是一个简单的使用示例：

<select data-placeholder="请选择一个国家" class="chosen-select" multiple tabindex="4">
  <option value=""></option>
  <option value="中国">中国</option>
  <option value="美国">美国</option>
  <option value="英国">英国</option>
  <option value="德国">德国</option>
</select>

$(".chosen-select").chosen({
  disable_search: true,
  max_selected_options: 2,
  width: "200px"
});

该示例将创建一个下拉框，同时添加了 disable_search 和 max_selected_options 选项。

Select2

Select2 是一种基于 jQuery 的插件，可帮助您将标准选择框转换为更高级的控件。

安装

使用 npm 进行安装：

npm install select2

或者，从官方网站下载源代码并包含 select2.min.js 和 select2.min.css。

选项

以下是一些 Select2 支持的选项：

• ajax：允许使用 AJAX 加载选项。
• minimumInputLength：至少输入几个字符后开始搜索。
• maximumSelectionLength：限制可选择的最大选项数。
• placeholder：可自定义占位符文本。
• tags：允许输入自定义选项。

示例

以下是一个简单的使用示例：

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    placeholder: "请选择一个州"
  });
});

该示例将创建一个下拉框，同时添加了 placeholder 选项。您还可以使用 ajax 选项来从服务器动态加载选项，或 tags 选项允许输入自定义选项。

在选择框样式上，Select2 总体来说是比 Chosen 更惊艳，多了更多用户能在选择框上自行调节大小及样式的拖动位置，选择很棒。