下拉选择，可全选，全不选_excel下拉到底的快捷方式资源-CSDN文库

共33个文件

html：13个

js：7个

css：6个

select插件

需积分: 5 124 浏览量 2018-11-30 15:34:53 上传评论收藏 119KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

下拉多选全选.zip （33个子文件）

index8.html 4KB

index12.html 7KB

index2.html 4KB

index.html 5KB

index5.html 5KB

index10.html 5KB

index4.html 5KB

src

jquery.multiselect.filter.js 5KB

jquery.multiselect.min.js 13KB

jquery.multiselect.filter.min.js 3KB

jquery.multiselect.js 22KB

jquery-2.1.1.min.js 82KB

2.jpg 16KB

1.jpg 19KB

index9.html 4KB

assets

ba.hashchange.js 1KB

prettify.css 710B

prettify.js 56KB

style.css 618B

fonts

icomoon.woff 1KB

icomoon.ttf 1KB

icomoon.svg 2KB

icomoon.eot 2KB

jQuery之家.url 268B

readme.html 865B

index7.html 4KB

index11.html 5KB

css

normalize.css 2KB

jquery.multiselect.filter.css 326B

jquery.multiselect.css 2KB

htmleaf-demo.css 5KB

index3.html 6KB

index6.html 4KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于jQuery UI的多项选择下拉列表框组件|DEM12_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.multiselect.filter.css" /> <link rel="stylesheet" type="text/css" href="assets/style.css" /> <link rel="stylesheet" type="text/css" href="assets/prettify.css" /> <link href="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" rel="stylesheet"> </head> <body onload="prettyPrint();"> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>基于jQuery UI的多项选择下拉列表框组件 <span>jQuery UI MultiSelect Widget</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Form/201603173226.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> <div class="htmleaf-demo center"> <a href="index.html">Basic</a> <a href="index2.html">打开/关闭动画</a> <a href="index3.html">回调函数</a> <a href="index4.html">自定义头部</a> <a href="index5.html">选项列表</a> <a href="index6.html">最大选择数</a> <a href="index7.html">预定义选择</a> <a href="index8.html">单选</a> <a href="index9.html">可选/不可选</a> <a href="index10.html">Refresh方法</a> <a href="index11.html">定位</a> <a href="index12.html" class="current">过滤</a> </div> </header> <div class="html-container"> <h2>Filter Plugin</h2> <p>Filtering is available by including the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/src/jquery.multiselect.filter.js">jquery.multiselect.filter.js</a> plugin and the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/jquery.multiselect.filter.css">jquery.multiselect.filter.css</a> CSS file. Initialize filtering on any of your multiselects by calling <code class="prettyprint">multiselectfilter()</code> on the widget.</p> <pre class="prettyprint"> $("select").multiselect().multiselectfilter(); </pre> <form style="margin:20px 0"> <p> <select multiple="multiple" style="width:370px"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="orange">Orange</option> <option value="purple">Purple</option> <option value="yellow">Yellow</option> <option value="brown">Brown</option> <option value="black">Black</option> </select> </p> <p> <select multiple="multiple" style="width:370px"> <optgroup label="test"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </optgroup> <optgroup label="foo"> <option value="orange">Orange</option> <option value="purple">Purple</option> <option value="yellow">Yellow</option> <option value="brown">Brown</option> <option value="black">Black</option> </optgroup> </select> </p> </form> <h3>Options:</h3> <p>Pass any of these as a configuration object when you initialize <code>multiselectfilter()</code>:</p> <ul> <li><code><strong>label</strong></code><p>The text to appear left of the input. Defaults to "Filter:"</p></li> <li><code><strong>width</strong></code><p>The width of the input in pixels. Defaults to 100px in the style sheet, but you can override this for each instance.</p></li> <li><code><strong>placeholder</strong></code><p>The HTML5 placeholder attribute value of the input. Only supported in webkit as of this writing. Defaults to "Enter keywords"</p></li> <li><code><strong>autoReset</strong></code><p>A boolean value denoting whether or not to reset the search box & any filtered options when the widget closes. Defaults to false.</p></li> </ul> <h3>Events:</h3> <ul> <li><code><strong>filter</strong></code> <p>A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.</p> <p>To do something when no matches are found:</p> <pre class="prettyprint"> $("select").multiselect().multiselectfilter({ filter: function(event, matches){ if( !matches.length ){ // do something } } }); </pre> <p>To do something with a match:</p> <pre class="prettyprint"> $("select").multiselect().multiselectfilter({ filter: function(event, matches){ // find the first matching checkbox var first_match = $( matches[0] ); } }); </pre> <p>You can also bind to the event after a multiselect has been initialized, like such: <pre class="prettyprint"> $("select").bind("multiselectfilterfilter", function(event, matches){ // do something }); </pre> </li> </ul> <h3>Methods</h3> <p>Syntax: <code class="prettyprint">$("select").multiselectfilter("method_name");</code></p> <ul> <li><code><strong>updateCache</strong></code><p>Reloads the cache of values to search against. Make sure you call this after dynamically adding or removing any inputs to the multiselect.</p></li> <li><code><strong>destroy</strong></code><p>Destroys the widget.</p></li> <li><code><strong>widget</strong></code><p>Returns the wrapper div with the input and label text inside. This is a quick and easy way to access the HTML created by the plugin.</p></li> </ul> </div> <div class="related"> <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3> <a href="http://www.htmleaf.com/jQuery/Form/201512182916.html"> <img src="related/1.jpg" width="300" alt="ui-choose|列表选择jQuery美化插件"/> <h3>ui-choose|列表选择jQuery美化插件</h3> </a> <a href="http://www.htmleaf.com/jQuery/Form/201506122021.html"> <img src="related/2.jpg" width="300" alt="jQuery和CSS3带弹性效果的创意下拉框特效"/> <h3>jQuery和CSS3带弹性效果的创意下拉框特效</h3> </a> </div> </div> <script src="js/jquery-2.1.1.min.js"></script> <script src="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/prettify.js"></script> <script type="text/javascript" src="src/jquery.multiselect.js"></script> <script type="text/javascript" src="src/jquery.multiselect.filter.js"></script> <script type="text/javascript"> $(function(){ $("select").multiselect().multiselectfilter({ checkAllText:"全选", uncheckAllText:"全不选" }); }); </script> </body> </html>

评论收藏

内容反馈