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' });
