52

我有一个简单的 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，并且一切正常。

4

9 回答 9

88

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

强制截图如下。

选择2： 选择2

选择： 选择

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

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

选择的图书馆

于 2012-02-28T22:37:54.377 回答
16

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

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

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

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

于 2011-08-17T12:52:10.517 回答
13

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

于 2014-09-04T13:06:29.730 回答
3

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

于 2011-10-21T08:26:30.437 回答
3

您可以使用 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>

同一文件夹中的所有文件

于 2016-04-04T08:30:44.573 回答
1

您可以自己破解，而不是依赖 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>
于 2014-04-07T19:10:54.103 回答
1 
<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);
于 2014-03-07T13:12:55.033 回答
1

我使用 jQuery MultiSelect 来实现带有复选框的多选下拉菜单。您可以从此处查看实施指南 -带复选框的多选下拉列表

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

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
于 2016-05-24T05:54:29.330 回答
0

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

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

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

编辑

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

于 2011-01-20T22:45:54.677 回答