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、效果图

              

  • 相关阅读:
    Node.js、vue.js的使用
    windows配置环境变量
    http常见状态码及其解析
    AWS使用教程
    免费服务器集锦 免费服务器大全 免费使用服务器
    免费服务器AWS免费使用一年详细教程
    PHP实现RSA2加密
    dcoker安装redis
    ES,kibana通过nginx添加访问权限
    docker快速安装kibana
  • 原文地址:https://www.cnblogs.com/xwtbk/p/6549365.html
Copyright © 2011-2022 走看看