jquery-ui-multiselect 实现select下拉多选

来源：互联网发布：mac微信2.0下载编辑：程序博客网时间：2024/05/17 07:01

1.下载需要的插件：
jquery-ui; 下载网站：http://jqueryui.com/download/all/（本实例使用jquery-ui-1.11.0）
jquery-ui-multiselect; 下载网站：https://github.com/ehynds/jquery-ui-multiselect-widget
注意：
jquery-ui-1.11.0只需要/images和jquery-ui.min.css,jquery-ui.min.js
jquery-ui-multiselect只需要jquery.multiselect.css,jquery.multiselect.js,jquery.multiselect.zh-cn.js

即可实现基本功能；

2.引入一系类js和css：

<span style="white-space:pre"></span><script type="text/javascript" src="${ctx }/jsp/resource/js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.js"></script><link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-1.11.0/jquery-ui.min.css"/><script type="text/javascript" src="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.js"></script><link rel="stylesheet" type="text/css" href="${ctx }/jsp/web/resource/jquery-ui-multiselect/jquery.multiselect.css"/>

3.代码块：

<span style="white-space:pre"></span><style>.ui-multiselect{line-height:20px;height:25px;}//修改select显示框的高度</style>

javascript:

<span style="white-space:pre"></span><script>$(function(){    $("select").multiselect({    noneSelectedText: "--请选择--",<span style="white-space:pre"></span>    <span style="white-space:pre"></span>header: false,//是否需要 头部的全选和全不选 <span style="white-space:pre"></span>      checkAllText: "全选",<span style="white-space:pre"></span>      uncheckAllText: '全不选',<span style="white-space:pre"></span>      selectedList:0,//选中后,在select中显示的选中text的个数,0代表不显示,只显示选中个数 <span style="white-space:pre"></span>      height: 100,//下拉选框的高度       <span style="white-space:pre"></span>minWidth: 200  //整个select的最小宽度    });});//获取选中值function getData(){var selectsVa = $("select").multiselect("getChecked").map(function(){               return this.value;   }).get();for(var i=0;i<selectsVa.length;i++){alert(selectsVa[i]);}}</script>

html:

<span style="white-space:pre"></span><select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">    <option value="V1">Option 1</option>    <option value="V2">Option 2</option>    <option value="V3">Option 3</option>    <option value="option4">Option 4</option>    <option value="option5">Option 5</option>    <option value="option6">Option 6</option>    <option value="option7">Option 7</option>    <option value="option8">Option 8</option>    <option value="option9">Option 9</option>    <option value="option10">Option 10</option>    <option value="option11">Option 11</option>    <option value="option12">Option 12</option>  </select>  <button onclick="getData()">getData</button>

0 0