您的位置：首页 > Web前端 > JQuery

jquery 多选下拉菜单、加搜索功能 select2

2015-12-28 22:10 851 查看

上一篇介绍了自动补全功能的插件autocomplete 。这一篇介绍下select2这款插件。

效果类似于下图

下载所需的文件，引用

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

**js代码**

<script language="javascript">
$(document).ready(function(){
tokenSeparators: [',', ' '],   //分隔符
placeholder:"请选择或输入tags",  //提示语
maximumSelectionLength :10,   //限制搜索的个数
tags: true                //可以手动添加，若限制手动添加，设置为false
});
</script>

**html代码**

<select id="ss1" multiple="multiple">
<option selected="selected" >abc</option>  //加selected="selected"显示已选择的
<option>aab</option>
<option>bbc</option>
<option>bba</option>
<option>css</option>
<option>cvv</option>
</select>

效果如下图

注（如果select2插件引用时，展示框出现样式问题，看下原页面的li标签的样式设置）

比较下select2 和autocomplete 。 select2可以选择多项，它们两者都可以根据一个字符搜索剩余的词。

附上select2的官方文档地址 http://select2.github.io/examples.html#multiple-max

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航