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

本文概述

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

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

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

文章图片
人们真正想要的是这样的：

文章图片
【使用jQuery Plugin Multiselect使用复选框实现可过滤的多选】多亏了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="http://www.srcmini.com/multiple-select.css"> < !-- Include plugin --> < script src="http://www.srcmini.com/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="http://www.srcmini.com/1"> January< /option> < option value="http://www.srcmini.com/2"> February< /option> < option value="http://www.srcmini.com/3"> March< /option> < option value="http://www.srcmini.com/4"> April< /option> < option value="http://www.srcmini.com/5"> May< /option> < option value="http://www.srcmini.com/6"> June< /option> < option value="http://www.srcmini.com/7"> July< /option> < option value="http://www.srcmini.com/8"> August< /option> < option value="http://www.srcmini.com/9"> September< /option> < option value="http://www.srcmini.com/10"> October< /option> < option value="http://www.srcmini.com/11"> November< /option> < option value="http://www.srcmini.com/12"> December< /option> < /select> < script> // Initialize multiple select on your regular select$("#my-select").multipleSelect({filter: true}); < /script>

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