前端select2插件使用

  Select2是一款基于JQuery的下拉列表插件,支持普通的下拉单选、下拉分组选择、药丸盒子模型。并且支持数据的远程请求、动态加载,还提供了操作过程中各种事件的处理、内容格式的定制、内容搜索等功能;

一、快速使用:

  1、普通下拉单选:

  HTML:

    

  JS:

     

  显示效果:

    

  2、药丸盒子:

  修改普通下拉单选框的js代码为:

    

  显示效果:

    

二、使用ajax设置数据源:

  使用示例:

    

  参数解释:

    Url:ajqx要发出的数据请求地址;

    dataType:设置返回数据的类型;

    processResult:对请求返回的数据进行处理,整理成select2所需要的数 据格式;

  Select2所接受的数据格式:(示例)

    

三、常用事件:

    

  事件监听使用举例:

    

  控制台显示:

    

四、常用操作:

  1、打开关闭

    

  2、数据操作:

    

  注:

    【1】获取的数据是一个数组,如果数据在填充的时候使用了id,那么返回的数组中每个元素就是选中项对应的id,否则就是实际选中的text值;设置值时也是如此;

    【2】设置值之后一定要调用trigger函数触发change事件,让设置生效;

五、其他配置选项:

    

 

posted @ 2017-12-13 10:37  冠king  阅读(228)  评论(0)    收藏  举报