jQuery multiselect下拉菜单

Question

我有一个简单的html多选下拉列表:

<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项目并提供滚动,我可以在按住shift或ctrl的同时选择多个元素.

jQuery的新手正在搜索http://jquery.com/但还没有找到我需要的东西.

编辑 Struts2用户,所选答案将url编码为[]这会导致struts2中的问题,但修复非常容易.只需打开jquery.multiSelect.js并搜索"[]"并删除在字符串连接中使用的一个实例.我也使用jQuery 1.4.4而不是与它捆绑在一起的1.3.2,一切正常.

Answer 1

更新(2017):以下两个库现在已成为与Javascript一起使用的最常见的下拉库.虽然它们是jQuery本机的,但它们已经过定制,可以处理从AngularJS 1.x到自定义CSS for Bootstrap的所有内容.(选择JS,这里的原始答案,似乎已降至人气的第3位.)

• 选择2:https://select2.github.io/
• 选择:http://selectize.github.io/selectize.js/

强制性截图如下.

选择二:

Selectize:

原始答案(2012):我认为选择的图书馆也可能有用.它有jQuery,Prototype和MooTools版本.

附件是选择中多选功能的截图.

Answer 2

我也在为我的公司寻找一个简单的多选.我想要一些简单,高度可定制的东西,除了jQuery之外没有其他大的依赖.

我没有找到符合我需求的东西,所以我决定自己编码.
我在生产中使用它.

这是一些演示和文档:loudev.com

如果您想贡献,请检查github存储库

Answer 3

• 下载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" />

• 填充您的选择输入

• 添加多选

  $('#' + 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; }

• 如果要重新填充选择,则必须刷新它:

  $('#' + Field).multiselect('refresh');

• 要获取所选值(以逗号分隔):

  var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

• 要清除所有选定的值:

  $('#' + Field).multiselect("uncheckAll");

Answer 4

你想做这样的事情http://jsfiddle.net/robert/xhHkG/

$('#transactionType').attr({
    'multiple': true,
    'size' : 10
});

把它放在一个$(function() {...})或其他一些加载中

编辑

重新阅读您的问题，您实际上并不是在寻找多项选择...而是一个允许您选择多项的下拉框。是的，可能最好使用插件或从头开始编写它，但这不是“快速回答”类型的交易。