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

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

效果类似于 下图

jquery 多选下拉菜单、加搜索功能 select2_第1张图片


下载所需的文件,引用

<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" >abcoption>  //加selected="selected"显示已选择的
           <option>aaboption>
           <option>bbcoption>
           <option>bbaoption>
           <option>cssoption>
           <option>cvvoption>
         select>

效果如下图

这里写图片描述


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

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

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

你可能感兴趣的:(jquery 多选下拉菜单、加搜索功能 select2)