select2使用

荒凉一梦 提交于 2020-02-11 03:55:33

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是[{}{}{}{}]格式的数组
    });  

其他具体参数,转载如下:

https://blog.csdn.net/u011317027/article/details/62891286/

 

使用:


设置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
版权声明:本文为博主原创文章,转载请附上博文链接!

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

 

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

解决方案:

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


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!