jQuery多选下拉菜单
我有一个简单的HTML多select下拉列表:
<select id="transactionType" multiple="multiple" size="10"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> <!-- etcetera... --> </select>
我想要继续使用这个列表,但事实上JavaScript禁用了JavaScript,我想将列表呈现为多选下拉列表。 这是它只显示列表中的一个项目,直到点击,然后将展开显示x项目,并提供滚动,在那里我可以select多个元素,如你所期望的同时按住shift或ctrl。
新的jQuerysearchhttp://jquery.com/,但还没有find我所需要的。
编辑 Struts2的用户,select的答案将URL编码为[]这导致在struts2修复问题,但是很容易。 只需打开jquery.multiSelect.js并search“[]”,并删除在string连接中使用的一个实例。 我也使用jQuery 1.4.4,而不是捆绑在一起的1.3.2,一切正常。
jQuery MultiSelect是我成功使用的一个。 你可以看到一个演示,以确定是否你正在寻找。
更新(2017):以下两个库现在已成为Javascript中最常用的下拉式库。 虽然它们是jQuery原生的,但是它们已经被定制为可以与从AngularJS 1.x到自定义CSS的Bootstrap一起使用。 (selectJS,原来的答案似乎已经降到了第三名。)
- Select2: https : //select2.github.io/
- select: http ://selectize.github.io/selectize.js/
下面的强制截图。
select二:
Selectize:
原文答案(2012) :我认为选定的图书馆也可能有用。 它提供了jQuery,Prototype和MooTools版本。
附件是多选function如何select的屏幕截图。
我也在为我的公司寻找一个简单的多选。 我想要一些简单的,高度可定制的,没有比jQuery更大的依赖。
我没有find一个适合我的需求,所以我决定编码我自己的。
我在生产中使用它。
这里有一些演示和文档: loudev.com
如果你想贡献,请检查github存储库
-
下载jquery.multiselect
-
包括jquery.multiselect.js和jquery.multiselect.css文件
<script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />
-
填充您的selectinput
-
添加多选
$('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });
-
你可以改变风格
ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }
-
如果你想重新select,你必须刷新它:
$('#' + Field).multiselect('refresh');
-
获取选定的值(以逗号分隔):
var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();
-
要清除所有选定的值:
$('#' + Field).multiselect("uncheckAll");
看看erichynds下拉多选和大量的设置和调音。
您可以使用chosen.i从此链接下载所有文件select下载链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="prism.css" rel="stylesheet" type="text/css" /> <link href="chosen.css" rel="stylesheet" type="text/css" /> <script src="jquery-2.1.4.min.js" type="text/javascript"></script> <script src="chosen.jquery.js" type="text/javascript"></script> <script src="prism.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".chzn-select").chosen(); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ion-view view-title="Profile"> <ion-content class="padding"> <div> <label class="item item-input"> <div class="input-label">Enter Your Option</div> <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;"> <option value="Option 2.1">Option 2.1</option> <option value="Option 2.2">Option 2.2</option> <option value="Option 2.3">Option 2.3</option> </select> </label> </div> </ion-content> </ion-view> </div> </form> </body> </html>
所有相同文件夹上的所有文件
你可以破解自己的,而不是依靠jQuery插件…虽然你需要保持跟踪外部(在JS)的选定项目,因为过渡将删除选定的状态信息:
<head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <script type='text/javascript'> $(window).load(function(){ $('#transactionType').focusin(function(){ $('#transactionType').attr('multiple', true); }); $('#transactionType').focusout(function(){ $('#transactionType').attr('multiple', false); }); });> </script> </head> <body> <select id="transactionType"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> </select> </body>
你是否想要做这样的事情http://jsfiddle.net/robert/xhHkG/
$('#transactionType').attr({ 'multiple': true, 'size' : 10 });
把它放在一个$(function() {...})
或其他onload中
编辑
重读你的问题,你不是真的在寻找一个多重select…但一个下拉框,让您select多个。 是的,也许最好使用插件或从头开始写,但这不是一个“快速答案”types的交易。
<select id="mycontrolId" multiple="multiple"> <option value="1" >one</option> <option value="2" >two</option> <option value="3">three</option> <option value="4">four</option> </select> var data = "1,3,4"; var dataarray = data.split(","); $("#mycontrolId").val(dataarray);
我用jQuery MultiSelect来实现多选下拉菜单和checkbox。 你可以从这里看到实现指南 – 多选下拉列表与checkbox
实现很简单,只需要使用下面的代码。
$('#transactionType').multiselect({ columns: 1, placeholder: 'Select Transaction Type' });