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并搜索＆＃34; []＆＃34;并删除在字符串连接中使用的一个实例。我也使用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）：我认为Chosen library也可能有用。它有jQuery，Prototype和MooTools版本。

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

Chosen library

Answer 2

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

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

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

如果您想参与，请查看github repository

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

使用大量设置和调整来查看erichynds dropdown multiselect。

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

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

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

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

Answer 8

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

实现非常简单，只需使用以下代码即可。

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

Answer 9

您是否希望执行此类http://jsfiddle.net/robert/xhHkG/

之类的操作

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

将其放入$(function() {...})或其他一些onload

修改

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

jQuery multiselect下拉菜单

9 个答案:

修改