jQuery 多选下拉菜单 [英] jQuery multiselect drop down menu
问题描述
我有一个简单的 html 多选下拉列表:
我想在 javascript 被禁用的情况下继续使用此列表，但是使用 javaScript 我想将列表呈现为多选下拉列表.也就是说，它只显示列表中的一项，直到被点击，然后将展开以显示 x 项并提供滚动，我可以在按住 shift 或 ctrl 的同时选择多个元素.
jQuery 新手正在搜索
选择:
<小时>原始答案 (2012):我认为 Chosen library也可能有用.它在 jQuery、Prototype 和 MooTools 版本中可用.
附上多选功能在 Chosen 中的外观截图.
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>
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.
New to jQuery was searching the http://jquery.com/ but haven't yet found what I need.
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.
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/
- Selectize: http://selectize.github.io/selectize.js/
Obligatory screenshots below.
Select2:
Selectize:
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 多选下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
