使用jQuery Plugin Multiselect使用复选框实现可过滤的多选

本文概述

• 1.下载多项选择插件
• 2.初始化和使用插件

浏览器中的典型多项选择并不是人们想要轻松使用的。要在多项选择中选择多个元素, 你将需要同时按下CTRL键, 否则其他选择的元素将被取消选择。那不是人们想要的亲爱的浏览器开发人员！代替这样一个无用的选择框：

人们真正想要的是这样的：

多亏了jQuery Multiple Select插件, 你将能够轻松, 几秒钟内实现这种选择, 并用新的酷选择来更改那些可怕的默认多选。在本文中, 我们将向你展示如何在Web项目中实现此插件。

1.下载多项选择插件

多重选择是一个非常有用的jQuery插件, 它允许你使用复选框选择多个元素, 而不是同时按下CTRL键并选择默认选择中的选项。要在你的项目中使用此插件, 你将需要3个文件, JavaScript核心, 默认样式表和包含下拉箭头的图像。你可以从Github的存储库下载这些文件, 并在项目中包含本地副本, 也可以使用CDN(请注意, 这不是压缩版本, 并且该项目不提供此版本, 因此你需要自己压缩代码)：

注意

由于这是一个jQuery插件, 你显然需要在该插件之前加载jQuery。

<!-- Using a local copy -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="multiple-select.css">
<!-- Include plugin -->
<script src="multiple-select.js"></script>

<!-- Or using a CDN -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css">
<!-- Include plugin -->
<script src="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.js"></script>

有关此插件的更多信息, 请访问Github上的官方存储库或此处的官方网站。

2.初始化和使用插件

要初始化插件, 显然你需要一个启用了multi属性的即用型选择组件, 无需添加特殊标记或其他不必要的东西, 只需包括插件并将其初始化在元素上即可：

<!-- A multiple select element -->
<select id="my-select" multiple="multiple">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<script>
    // Initialize multiple select on your regular select
    $("#my-select").multipleSelect({
        filter: true
    });
</script>

该插件提供了一个文档齐全的页面, 其中包含该插件可用的所有选项和事件。你可以在此小提琴中看到该插件的实时演示。 Multiple Selected是根据MIT许可证获得许可的, 这意味着它是完全免费的, 你可以任意使用和修改此插件。

编码愉快！