前一个项目，由于项目需求，需要大量使用到下拉多选框，而由于本人又不会写有关 CSS 样式，所以，便上网找到了这个 jQuery 插件：jquery-ui-multiselect 。该款插件提供了基本下拉多选功能，同时，还可扩展进行搜索功能。

在使用一个插件时候，最重要的事情，莫过于查看插件文档以及其 demo ，相信很多人，会没有仔细查看 API 文档，遇到问题一下无法解决。因此，推荐大家在使用插件时，一定要仔细阅读 API 文档。另外，一般插件在使用过程 ，往往就三个重点细节：插件基本参数配置 （ option---{width:20px,height:100px....} 类似这种配置插件基本参数）、插件公开可调用的 API 方法（一般插件会提供一些方法，供用户调用）、最后一个，即是事件，以便插件在触发该事件时候，供用户加入相关逻辑判断。因此，在阅读文档时候，用户着重注意以上几个点。

 jquery-ui-multiselect：该插件扩展自 jQuery，同时，也使用了 jQuery UI，因此，用户需在头部依次引入 jQuery.js、jquery-ui.min.js(jquery-ui.css)、jquery.multiselect.js（jquery.multiselect.css），注意引入 javascript 文件顺序。

     


  // default options  该插件源码中部分代码 该部分即插件三个重点第一个部分 : 提供默认的配置参数，用户可根据自身需求设置

    options: {

      header: true,

      height: 175,

      minWidth: 225,

      classes: '',

      checkAllText: 'Check all',

      uncheckAllText: 'Uncheck all',

      noneSelectedText: 'Select options',

      selectedText: '# selected',

      selectedList: 0,

      show: null,

      hide: null,

      autoOpen: false,

      multiple: true,

      position: {},

      appendTo: "body",

      menuWidth:null

    },

部分代码，如下所示

 // 用户需在头部引入之前提及的 js 文件

 <body>
  // 如若 select 标签中，不包括 multiple="multiple" 属性值，将默认选中第一项，即中国

 <select id='select' multiple="multiple">

 /** 此处 option 内容可根据需求填充**/

 <option value="中国">中国</option>

 <option value="美国">美国</option>

 <option value="英国">英国</option>

 <option value="日本">日本</option>

 <option value="韩国">韩国</option>

 <option value="德国">德国</option>

 <option value="加拿大">加拿大</option>

 <option value="埃及">埃及</option>

 <option value="意大利">意大利</option>

 <option value="俄罗斯">俄罗斯</option>

 <option value="法国">法国</option>

 </select>

 <script type="text/javascript">

 $(function(){

   //以下为初始配置参数，用户可自行配置，同时，可配置事件参数

   $('#select').multiselect({

      header: true,

      height: 175,

      minWidth: 225,

      classes: '',

      checkAllText: '选中全部',

      uncheckAllText: '取消全选',

      noneSelectedText: '请勾选',

      selectedText: '# 选中',

      selectedList: 5,

      show: null,

      hide: null,

      autoOpen: false,

      multiple: true,

      position: {},

      appendTo: "body",

      menuWidth:null

    });

 });

 </script>

 <body>

       同时， jquery-ui-multiselect  还可增加新功能，进行下拉列表搜索选择，不过，需要额外引入  jquery.multiselect.filter.js（ jquery.multiselect.filter.css ），以入再次调用  multiselectfilter(可配默认参数) 方法即可实现下拉搜索选择功能。

    具体 API 文档，请查看作者官网：http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/index.htm#filter

jQuery UI 多选下拉框插件：jquery-ui-multiselect的更多相关文章

  1. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  2. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  3. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  4. jQuery自定义多选下拉框

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...

  5. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  6. jQuery自定义漂亮的下拉框插件8种效果

    jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...

  7. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  8. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  9. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. sql2005数据库转换成sql2000

    第一步:在SQL2005中生成脚本文件 ①     在2005中选中要进行转换的那个数据库,鼠标“右键”选择—“属性”—“选项”:修改“兼容级别”为“SQL Server 2000 (80)”: ②  ...

  2. 查看tablespace实际使用量和剩余空间

    到某表空间所有段的加和值,即按表空间分组统计dba_data_files.bytes-dba_free_space.bytes=dba_segments.bytesdba_segments中可查询已分 ...

  3. Oracle RAC OCR 的备份与恢复

    Oracle Clusterware把整个集群的配置信息放在共享存储上,这些信息包括了集群节点的列表.集群数据库实例到节点的映射以及CRS应用程序资源信息.也即是存放在ocr 磁盘(或者ocfs文件) ...

  4. getDeclaredMethods()和getMethods()区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...

  5. Hibernate优化

    前言 在一般情况下,Hibernate需要将执行转换为SQL语句从而性能低于JDBC.但是在经过比较好的性能优化之后,性能还是让人相当满意的,特别是应用二级缓存之后,甚至可以获得比较不使用缓存的JDB ...

  6. POJ 1519 Digital Roots

    题意:求数根. 解法:一个数的数根就是mod9的值,0换成9,只是没想到给的是一个大数……只好先把每位都加起来再mod9…… 代码: #include<stdio.h> #include& ...

  7. useful-scripts

    最近在github看到关于一些比较好的java相关脚本.vcs脚本.shell脚本.怕以后忘记了,在此做个备注. 原链接为:https://github.com/oldratlee/useful-sc ...

  8. hdu5073 简单枚举+精度处理

    其实这题还是挺简单的,因为移动k个星球后,这k个星球的权值就可以变为0,所以只有剩下的本来就是连着的才是最优解,也就是说要动也是动两端的,那么就O(N)枚举一遍动哪些就好了. 我是在杭电oj题目重现的 ...

  9. [King.yue]Ext.Net 正则表达式用法

    例: .Regex("^[A-Za-z0-9]+$")   //正则表达式 .InvalidText("只能输入英文字符和数字.")); //输入错误提示

  10. 软件测试技术（二）——使用等价类划分的方法进行的UI测试

    测试的目标程序 程序代码 import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...