jQuery multiselect下拉菜单 [英] jQuery multiselect drop down menu

问题描述

我有一个简单的html multi select下拉列表:

I have a simple html multi select drop down list:

<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的同时，我可以根据需要选择多个元素.

I want to continue to use this list in the event javascript is disabled however with javaScript I would like to render the list as a multi-select drop down list. That is it only shows one item in the list until clicked and then will expand to show x items and provide scrolling, where I can select multiple elements as you would expect while holding shift or ctrl.

jQuery的新功能正在搜索 http://jquery.com/，但尚未找到我需要的东西

New to jQuery was searching the http://jquery.com/ but haven't yet found what I need.

编辑 Struts2用户，选择的答案将使用[]进行url编码，这会在struts2中引起问题，但修复很容易.只需打开jquery.multiSelect.js并搜索"[]"并删除一个用于字符串连接的实例.我还使用了jQuery 1.4.4，而不是与它捆绑在一起的1.3.2，并且一切正常.

Edit Struts2 users, the selected answer will url encode with [] this causes issues in struts2 the fix however is very easy. Simply open jquery.multiSelect.js and search for "[]" and delete the one instance this is used in a string concatenation. I also am using jQuery 1.4.4 as opposed to the 1.3.2 which came bundled with it and everything works just fine.

推荐答案

更新(2017):现在，以下两个库已成为Javascript最常用的下拉库.虽然它们是jQuery原生的，但是它们已经过定制，可以与AngularJS 1.x到为Bootstrap定制CSS一起使用. (此处最初的答案是选择的JS，人气下降到了第3位.)

Update (2017): The following two libraries have now become the most common drop-down libraries used with Javascript. While they are jQuery-native, they have been customized to work with everything from AngularJS 1.x to having custom CSS for Bootstrap. (Chosen JS, the original answer here, seems to have dropped to #3 in popularity.)

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

• Select2: https://select2.github.io/
• Selectize: http://selectize.github.io/selectize.js/

下面的必填屏幕截图.

选择2:

选择:

原始答案(2012年):我认为选择的库可能也有用.它有jQuery，Prototype和MooTools版本.

Original answer (2012): I think that the Chosen library might also be useful. Its available in jQuery, Prototype and MooTools versions.

随附的屏幕快照显示了选择功能在选择"中的外观.

Attached is a screenshot of how the multi-select functionality looks in Chosen.

这篇关于jQuery multiselect下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！