下拉框、下拉控件之Select2（含多选）

这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。

组件的下载地址以及API说明地址：

1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/

2、Select2参数文档说明：https://select2.github.io/options.html

3、Select2源码：https://github.com/select2/select2

页面

<select id="goodsId" name="goodsId" multiple="multiple" class="form-control">
</select>

引入js

<style type="text/css">.select2-container {z-index: 9999;}
</style>
<link type="text/css" rel="stylesheet" href="/static/plugins/select2/css/select2.min.css"/>
<script type="text/javascript" src="/static/plugins/select2/js/select2.min.js"></script>
<script type="text/javascript" src="/static/plugins/select2/js/i18n/zh-CN.js"></script>

js:

$("#goodsId").select2({placeholder: "请输入商品名搜索",minimumInputLength: 1,                                     //输入多少个字符后开始查询
    tags: false,                                                //不允许手动添加
    allowClear: true,                                          //可删除
    language: "zh-CN",maximumSelectionLength: 5,  // 多选 - 设置最多可以选择多少项
    tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
    ajax: {url: adminUrl + "/***/*****",type: 'get',delay: 250,data: function (params) {return {goodName: $.trim(params.term),};},processResults: function (response) {var items = [];var goods = response.data.goods;$.each(goods, function (index, good) {var goodName = good.goodName;items.push({id: good.id, text: goodName,goodsPrice:good.price})});return {results: items,};}}
});

效果

获取data-select2-id的值

    var goodids = $("#goodsId").select2("val");===》 ["541", "1566"]

以下内容更详细，来由：转载

一、Select2的功能简介

select2插件给我们带来了更加友好的交互方式，比如查询控件展开后可通过关键字进行检索

例如：

Select2也可以选择带查询控件的选择框...

Select2更是支持多值选择框...

二、如何使用Select2？

2.1 通过CDN引用

将以下两行代码添加到html页面，即完成了Select2的引入：

[html] view plaincopy

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

注意：还需引入jquery支持select2的使用

2.2 通过离线引用

到Select2官网下载对应版本的库，通过工程的相对路径完成Select2的引入：

2.2.1 引入js资源库

Select2的库下载后放在工程的webapp--->js文件夹中，Select2库的文件名称是“select2.min.js”

因此引入路径为：【/js/select2.min.js】

2.2.2 引入css样式

三、Select2常用API

3.1 源码

[html] view plaincopy

<span>区域：</span>
<select id="area" class="select2">
<option value="" selected="selected">请选择区域</option>
<option value="<strong>1</strong>">珠海</option>
<option value="<strong>2</strong>">深圳</option>
<option value="<strong>3</strong>">澳门</option>
<option value="<strong>4</strong>">香港</option>
</select>

3.2 初始化select2

[javascript] view plaincopy

<script type="text/javascript">
//页面加载完成后初始化select2控件
$(function () {
$("#area").select2();
});
</script>

select2()函数可添加相应配置：

[javascript] view plaincopy

$('#area').select2({
placeholder: '请选择区域'
});

3.3 选中控件id="area"、value="1"的元素

[javascript] view plaincopy

//初始化select2
var areaObj = $("#area").select2();
var optionVal = 1;
areaObj .val(optionVal).trigger("change");
areaObj .change();

3.4获取、更改select的value值

获取值：默认是获取当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么获取的value值就是1

[javascript] view plaincopy

$("#area").select2('val');

更改值：将val更改为756；默认是更改当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么更改后的value值就是756

[javascript] view plaincopy

$("#area").select2('val','756');

下拉框、下拉控件之Select2（含多选）相关推荐

《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件
实现下拉框按钮ComboBox控件创建节点编写脚本该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成下拉框ComboBox控件. ...
MFC_C++02_模态对话框，非模态对话框，StaticText静态文本，CEditCtrl控件，ComboBox下拉框，CListCtrl控件，CTreeCtrl 树控件，TabCtrl标签控件
01 模态对话框创建更改标题名: 菜单栏 --> 视图->工具箱 ,找到工具箱导入两个按钮: 准备对话框: 插入就可以了,更改名称双击按钮,可以进入点击事件创建控件的类:右击-&g ...
除了下拉框/下拉联想词优化推广，还可以做那些网络推广？
现在的企业,不能像几年前,单纯的搭建好网站或网络平台,具备了网络推广完善的功能,做做SEOer就万事大吉了. 因为这几年网络变化太大了,自媒体.小视频的爆发,所以现在我们更需要结合多平台多渠道多方位的 ...
菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
VS2008下用MFC 的MSComm控件编写串口程序
可以在:http://download.csdn.net/detail/plutus_lee/4525446 下载详细文档. 首先感谢网络资源吧,作为一个自动化专业出身的,不懂串口实在让我有点无奈,本 ...
窗体中实现按回车键跳到下一个可选的TabIndex控件
Form中一"textbox",两"button",如何实现在textbox中按下回车响应button.click事件 : 1)把按钮的tabindex依次设置 ...
MFC_2.2 编辑框和文本控件
编辑框和文本控件 1.拖控件 2.绑定变量.用户名密码编辑框控件类型.取名字.用户协议用值类型,默认CString. 设置属性.用户类型.选择mustiline TRUE. AOTO HScroll ...
android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...
php select下拉框,下拉框处理（select）
在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再 ...

下拉框、下拉控件之Select2（含多选）

下拉框、下拉控件之Select2（含多选）相关推荐

最新文章

热门文章