zoukankan      html  css  js  c++  java
  • multiSelect 下拉多选插件

    multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法。

    使用方法:

    1、引用 multiSelect.css及 multiSelect.js。

    下载地址 http://loudev.com/

    2、因为 multiSelect 是基于jquery开发的一款插件,所以在使用之前必须要引用jquery 1.8以上版本。

    3、html代码中必须含有 multiple="multiple"

     <select multiple="multiple" id="my-select" name="my-select[]">
          <option value='elem_1'>elem 1</option>
          <option value='elem_2'>elem 2</option>
          <option value='elem_3'>elem 3</option>
          <option value='elem_4'>elem 4</option>
      </select>

    4、js

    $("#my-select").multiselect({
            header: true,
            height: 200,
            minWidth: 200,
            selectedList: 9999,
            hide: [ "explode", 500 ],
            noneSelectedText: "==请选择==", 
            checkAllText: "全选", 
            uncheckAllText: '全不选', 
            selectedList:4 
            close: function ()
            {
            }
        });                

    5、参数

    名称 类型 默认值 描述
    afterInit function function(container){} 在multiSelect启动后调用的函数
    afterSelect function function(values){} 选择一个元素后调用的方法。
    afterDeselect function function(values){} 取消一个元素后调用的方法。
    selectableHeader HTML/Text null 可选择的列表的标题
    selectionHeader HTML/Text null 被选择的列表的标题
    selectableFooter HTML/Text null 可选择的列表的页脚
    selectionFooter HTML/Text null 被选择的列表的页脚
    disabledClass String 'disabled' 禁用元素的css类
    selectableOptgroup Boolean false 当设置为true时会选择所有的选项
    keepOrder Boolean false 筛选
    dblClick Boolean false 替换默认点击事件,通过dblclick选择项目
    cssClass String "" 将自定义CSS类添加到多选择容器。

    6、效果图

              

  • 相关阅读:
    We Never Told Him He Couldn't Do It
    我是天蝎
    学习生活,有感动的时候
    .NET中AOP方便之神SheepAspect
    Effective Java (类和接口)
    Step By Step(Java 系列的目录)
    Linux Shel高级技巧(目录)
    Linux Shell经典实例解析Oracle启动脚本(下)
    Java和C++在细节上的差异(目录)
    Linux Shell经典实例解析Oracle启动脚本(上)
  • 原文地址:https://www.cnblogs.com/xwtbk/p/6549365.html
Copyright © 2011-2022 走看看