jQuery 多选下拉菜单答案

【问题标题】：jQuery multiselect drop down menujQuery 多选下拉菜单
【发布时间】：2011-06-12 19:26:24
【问题描述】：

我有一个简单的 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，一切都很好。

【问题讨论】：

我认为你可能找错地方了——这对于插件或 jQuery UI 小部件来说是正确的工作。 plugins.jquery.com 和 jqueryui.com 可能会帮助您入门。
刚开始 jQuery 我发现所有建议的解决方案都很有用，但 Bill N 解决方案在视觉上非常接近我想要的，但实际上它甚至比我想要的更“酷”（我的意思是检查框，我可以使用普通突出显示的元素）。

标签： jquery jquery-ui jquery-plugins multi-select

【解决方案1】：

更新（2017 年）：以下两个库现已成为与 Javascript 一起使用的最常见的下拉库。虽然它们是 jQuery 原生的，但它们已经过定制以适用于从 AngularJS 1.x 到为 Bootstrap 提供自定义 CSS 的所有内容。（Chosen JS，这里的原始答案，似乎已经下降到了第 3 位。）

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

以下强制截图。

选择2：

选择：

原始答案（2012 年）：我认为Chosen library 也可能有用。它提供 jQuery、Prototype 和 MooTools 版本。

附件是选择功能中多选功能的屏幕截图。

【讨论】：

免费许可证和不错的功能，我喜欢。
糟糕的文档：在弄清楚如何取消选择值时运气好吗？
@imparator：您的意思是编程方式，还是来自用户界面？使用 UI，您只需单击多选的十字图标。
在 page_load 上，我如何应用数组来选择选中的项目？
我不知道为什么，但我不能在同一页面上使用多个多选，使用 select2（最新版本，悲伤..），因为插件仅首先发送表单多选值（（（。但我需要使用几个多选元素。我认为我做的都是正确的..可能有一些额外的“超级”选项，可以控制这种行为。

【解决方案2】：

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

我没有找到适合我需要的，所以我决定自己编写代码。
我在生产中使用它。

这里有一些演示和文档：loudev.com

如果您想投稿，请查看github repository

【讨论】：

很好，这是我非常喜欢的另一种方法。我不确定我们是否会使用它，但它让我开始思考我希望 UI 看起来像什么。谢谢！
@lou 我对你的多选插件有一种奇怪的体验。我在这里的问题中解释了-->stackoverflow.com/questions/16725015/… ..你能看看他们在我做的事情中是否有问题。

【解决方案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");

【讨论】：

我使用相同的 js 和 css 但我无法获得检查值你能指导我哪里出错了吗？var SelectedOptions = $('#ddlColumn').multiselect("getChecked" ).map(function () { return this.value; }).get(); alert(SelectedOptions);
您能否指出可用的文档和选项？

【解决方案4】：

看看erichynds dropdown multiselect 的大量设置和调整。

【讨论】：

如果过滤器允许我用回车键选择顶部过滤的元素，我会喜欢它，也许可以，但演示没有显示。这看起来很有趣，我可能想使用它，但目前我喜欢 jQuery MuiltiSelect 的简单性，所以它仍然是赢家，直到通过输入选择是该小部件的默认行为。
另外，当过滤器处于活动状态时，如果向上/向下箭头可以移动到选项列表中，那也很好。
链接失效

【解决方案5】：

您可以使用 selected.i 从此链接下载所有文件 Chosen download Link

<!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>

所有文件都在同一个文件夹中

【讨论】：

请在 page_load 上，我如何应用数组来选择选中的项目？
不明白你想要什么。如果可能的话，在 stackoverflow 上提问并分享你的问题链接

【解决方案6】：

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

【讨论】：

【解决方案7】：

您可以自己破解，而不是依赖 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>

【讨论】：

【解决方案8】：

我使用 jQuery MultiSelect 来实现带有复选框的多选下拉菜单。您可以从这里查看实施指南 - Multi-select Dropdown List with Checkbox

实现很简单，只需要使用如下代码即可。

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});

【讨论】：

【解决方案9】：

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

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

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

编辑

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

【讨论】：