jquery-select2jquery-select2入门


备注

本节概述了jquery-select2是什么,以及开发人员可能想要使用它的原因。

它还应该提到jquery-select2中的任何大型主题,并链接到相关主题。由于jquery-select2的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发行说明链接发布日期
4.0.3(当前) 选择2 4.0.3 2016年5月27日
4.0.2 选择2 4.0.2 2016年3月9日
4.0.2 RC1 选择2 4.0.2-rc1 2016年2月14日
4.0.1 选择2 4.0.1 2015年11月27日
4.0.1 RC1 选择2 4.0.1-rc1 2015年11月10日
3.5.4 选择2 3.5.4 2015年8月30日
3.5.3 选择2 3.5.3 二零一五年八月二十日
**旧版本可在以下位置找到: 选择2 /发行 二零一五年八月二十日

Jquery - Select2安装和设置

您可以通过以下两种方式之一包含/安装Select2

  1. 直接在项目主题部分的项目中使用CDN。

link href =“ https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css "rel =”stylesheet“/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>
 
  1. 将代码下载到本地计算机并将其包含在项目中。它看起来应该是这样的在此处输入图像描述

然后将这些行包含在html页面的head部分中

  <link href="select2.min.css" rel="stylesheet" />
  <script src="select2.min.js"></script>
 

注意:您需要在项目中包含Jquery才能使Select2正常工作。

PITFALL:如果当前版本的jquery和Select2存在冲突,或者Select2功能不起作用。然后将select2变量和实现移动到单独的文档体块$(document).ready(function(){// your select2 code .....});

使用方法:您可以按如下方式定义<select>

<select id="select2_example">
    <option>Test</option>
</select>
 

Approach1:

      var _mSelect2 = $("#select_example").select2();
 

Approach2:

  <script type="text/javascript">
      $('select').select2();
  </script>
 

请注意,使用此方法,所有定义的“选择”页面控件都将继承Select2的功能。如果您只想对某些控件使用Select2,请跳过此步骤并编写自己的代码以直接使用select2功能,并将jquery / javascript功能分别用于其他选择控件。但是,您可以使用通过Select2操纵Jquery的值,反之亦然。

“基础知识”的更多示例可以在这里的Select2 GIT文档中找到

Select2 GIT项目就在这里 。请浏览Select2 Github网站了解该产品的详细功能。

清除Select2下拉列表的选定元素。

为了清除使用Select2 下拉列表选择的那些值,我们可以使用empty()函数。

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
 

可以使用Jquery重置下拉列表。

$("#select2_example").empty();
 

它也可以重置如下。

$("#select2_example").select2("val", "");