jQuery 多选下拉菜单

jQuery multiselect drop down menu

提问by Quaternion

I have a simple html multi select drop down list:

我有一个简单的 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>

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.

我想在禁用 javascript 的情况下继续使用此列表，但是使用 javaScript 我想将列表呈现为多选下拉列表。也就是说，它只显示列表中的一项，直到单击，然后将展开以显示 x 项并提供滚动，我可以在按住 shift 或 ctrl 的同时选择多个元素。

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

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

EditStruts2 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.

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

回答by Suman

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

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

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

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

Obligatory screenshots below.

强制截图如下。

Select2:

选择2：

Selectize:

选择：

---

---

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

原始答案（2012）：我认为Chosen 库也可能有用。它在 jQuery、Prototype 和 MooTools 版本中可用。

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

附件是多选功能在 Chosen 中的外观截图。

回答by lou

I was also looking for a simple multi select for my company. I wanted something simple, highly customizable and with no big dependencies others than jQuery.

我也在为我的公司寻找一个简单的多选。我想要一些简单的、高度可定制的并且除了 jQuery 之外没有大的依赖项。

I didn't found one fitting my needs so I decided to code my own.
I use it in production.

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

Here's some demos and documentation: loudev.com

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

If you want to contribute, check the github repository

如果你想贡献，请查看github 存储库

回答by Oranit Dar

• Download jquery.multiselect

• Include the jquery.multiselect.js and jquery.multiselect.css files

  <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" />

• Populate your select input

• Add the multiselect

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

• You may change the style

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

• If you want to repopulate the select, you must refresh it:

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

• To get the selected values (comma separated):

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

• To clear all selected values:

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

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

回答by syed mhamudul hasan akash

You can use chosen.i download all file from this link Chosen download Link

您可以使用 selected.i 从此链接下载所有文件 选择下载链接

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

All file on all same folder

所有相同文件夹中的所有文件

回答by sergejsvit

Take a look at erichynds dropdown multiselectwith huge amount of settings and tunings.

看看具有大量设置和调整的erichynds 下拉多选。

回答by JoyGuru

I've used jQuery MultiSelect for implementing multiselect drop down menu with checkbox. You can see the implementation guide from here - Multi-select Dropdown List with Checkbox

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

Implementation is very simple, need only using the following code.

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

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

回答by wasay raza

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

回答by nmz787

You could hack your own, not relying on jQuery plugins... though you'd need to keep track externally (in JS) of selected items since the transition would remove the selected state info:

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

回答by Robert

Are you looking to do something like this http://jsfiddle.net/robert/xhHkG/

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

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

Put that in a $(function() {...})or some other onload

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

Edit

编辑

Reread your question, you're not really looking for a multiple select... but a dropdown box that allows you to select multiple. Yeah, probably best to use a plugin for that or write it from the ground up, it's not a "quick answer" type deal though.

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