select2是一个非常好用的下拉框插件，支持很多功能。

官方文档，例子：http://select2.github.io/

现在记录一下我在工作中用到的下拉框多值选择。界面如下：

 

 

在引入css 、js文件之后，html页面如下：

<select id="cluster" class="select2" multiple="multiple">

  <option value="1">jiesi-1</option>

    ...

  <option value="5">jiesi-8</option>

</select>

 

初始化：

 

在js中加载的时候初始化select.

$("#id").select2();

当然，这是默认的不带任何属性的初始化，还可以带一些参数，具体如下：

$('#id').select2({

    placeholder : '输入话题关键字',

    tags : true,

    multiple : true,

    height: '40px',

    maximumSelectionLength : 3,

    allowClear : true,

    language: "zh-CN",

    data : itemList itemList是[{}{}{}{}]格式的数组

    });  

其他具体参数，转载如下：

 

使用：

设置select选中某个值：

    $("#cluster").val(3);//设置选中值

    $("#cluster").trigger("change");//触发change事件，让界面上显示选中的值

设置select多值选中：

$("#cluster").val([2,3]).trigger("change");//设置多个值选中

设置select选中某个值，并且触发选中事件

$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");

//获取select选中的值：

    alert($("#cluster").val());//3,4,5 //输出选择的value，获得的是数组格式  但是直接alert是显示的以逗号隔开

　    var selected = $("#cluster option:selected").text();//选择的文本值   中间没有逗号间隔开！

　获得自定义属性：

　　$("#cluster option:selected").attr("name");

 

select的清空：

首先清空option很简单：$("#select2_id").empty();但是这样清除了之后，选中的值仍然在文本框里显示着：

 

这个功能很小，只是一个函数的问题，之所以写这篇文章是因为当时遇到这个问题在百度上搜索半天无果，希望能帮到遇到该问题的朋友。

解决方案：

$("#search-orgId").select2("val", "");

之所以这么难找，是因为select2官方网站在最新版本的demo程序中没有讲到清除选择，我是在3.5版本的demo例子中找到的解决方案，3.5版本的例子还是蛮多的，感觉比4.0版本的要好，3.5版本的网址为：点击打开链接

---------------------

作者：一日夜

来源：CSDN

原文：https://blog.csdn.net/u011317027/article/details/62891286?utm_source=copy

版权声明：本文为博主原创文章，转载请附上博文链接！