UDN-企业互联网技术人气社区

板块导航

浏览  : 1063
回复  : 2

[jQuery] jQuery使用Selectator插件实现多选下拉列表过滤框

[复制链接]
山外青山的头像 楼主
本帖最后由 山外青山 于 2016-12-13 16:40 编辑

       Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框,需要的朋友一起学习吧

       Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。
 
2016040814141145.jpg

  使用方法
  
  使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。
  1. <link rel="stylesheet" href="fm.selectator.jquery.css"/>
  2. <script src="jquery-1.11.0.min.js"></script>
  3. <script src="fm.selectator.jquery.js"></script>
复制代码
  
  HTML结构
  
  一个选项带图标级带分组选项的下拉列表的HTML结构如下:
  1. <label for="select">
  2. Multi select with custom content:
  3. </label>
  4. <select id="select" name="select" multiple>
  5. <optgroup label="Group one" class="group_one">
  6. <option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
  7. <option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
  8. </optgroup>
  9. <optgroup label="Group two" class="group_two">
  10. <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
  11. <option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
  12. <option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
  13. <option value="6" class="option_six">Six</option>
  14. </optgroup>
  15. <optgroup label="Group three" class="group_three">
  16. <option value="7" class="option_seven">Seven</option>
  17. </optgroup>
  18. <option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
  19. <option value="9" class="option_nine">Nine</option>
  20. <option value="10" class="option_ten" selected>Ten</option>
  21. <option value="11" class="option_eleven" selected>Eleven</option>
  22. <option value="12" class="option_twelve">Twelve</option>
  23. <option value="13" class="option_thirteen">Thirteen</option>
  24. <option value="14" class="option_fourteen">Fourteen</option>
  25. </select>
  26. <input value="activate selectator" id="activate_selectator4" type="button">
复制代码

  初始化插件
  
  在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。  
  
  1. $('#selectBox').selectator();
复制代码
 
  你也可以直接使用标签来初始化它:  
  
  1. <select multiple class="selectator" data-selectator-keep-open="true">
复制代码
  
  配置参数
  1. $('#selectBox').selectator({
  2. prefix: 'selectator_', // CSS class prefix
  3. height: 'auto', // auto or element
  4. useDimmer: false, // dims the screen when option list is visible
  5. u**arch: true, // if false, the search boxes are removed and
  6. // `showAllOptionsOnFocus` is forced to true
  7. keepOpen: false, // if true, then the dropdown will not close when
  8. // selecting options, but stay open until losing focus
  9. showAllOptionsOnFocus: false, // shows all options if input box is empty
  10. selectFirstOptionOnSearch: true, // selects the topmost option on every search
  11. searchCallback: function(value){}, // Callback function when enter is pressed and
  12. // no option is active in multi select box
  13. labels: {
  14. search: 'Search...' // Placeholder text in search box in single select box
  15. }
  16. });
复制代码

  其它可用的属性标签
  
  通过使用data-left、data-right和data-subtitle标签你可以扩展下拉列表的显示信息。它们可以通过CSS来设置样式,CSS的前缀为:prefix_title、prefix_left、prefix_right和prefix_subtitle。这些数据都是纯HTML代码,所以你也可以使用图片代码。
  1. <select id="selectBox">
  2. <!-- Normal option tag -->
  3. <option value="1">This is the title</option>
  4. <!-- Extended option tag -->
  5. <option value="2" data-left="This is the left section"
  6. data-right="This is the right section"
  7. data-subtitle="This is the section under the title">This is the title</option>
  8. </select>
复制代码

  上的代码会显示为类似下面的结构:
 
QQ截图20161213163324.png
 
  CSS类
  
1.png
2.png

  方法
QQ截图20161213163242.png

相关帖子

发表于 2016-12-13 16:39:03 | 显示全部楼层
经常看到”山外青山“发帖,辛苦了
使用道具 举报

回复

发表于 2016-12-16 03:10:41 | 显示全部楼层
我完全是被标题<<jQuery使用Selectator插件实现多选下拉列表过滤框>>吸引过来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部