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版本的网址为:点击打开链接
来源:https://www.cnblogs.com/4job/p/9798133.html