logo标签列表

jQuery多选下拉菜单

jqueryjquery-uijquery-pluginsmulti-select
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版本，一切正常。

我认为你可能在错误的地方寻找——这是插件或jQuery UI小部件的正确工作。http://plugins.jquery.com/和http://jqueryui.com/可能会帮助你入门。 - polarblau
刚开始学习jQuery时，我发现所有提出的解决方案都很有用，但Bill N的解决方案在视觉上非常接近我想要的，但实际上它比我想要的更加“酷”（我的意思是复选框，我只需要简单的突出元素就可以了）。 - Quaternion
9个回答
91

更新（2017年）：以下两个库现在已成为使用JavaScript最常见的下拉列表库。虽然它们是jQuery原生的，但它们已经被定制为可以与从AngularJS 1.x到具有自定义CSS的Bootstrap一切协作。（原始答案中的Chosen JS似乎已经掉到第三位了。）

下面是强制性的屏幕截图。

Select2: Select2

Selectize: Selectize

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

附上了Chosen中多选功能的截图。

Chosen library

4
自由授权和不错的功能，我很喜欢。 - Quaternion
糟糕的文档：有没有什么办法可以取消选择值？ - oneiros
@imparator：您是指通过编程实现，还是从用户界面上直接操作？在用户界面上，您只需要点击多选项中的叉号图标即可。 - Suman
在页面加载时，我如何将数组应用于选择Chosen中的项目？ - Charles Okwuagwu
我不知道为什么在同一页上使用多个多选框（使用最新版本的select2插件）时会出现问题，因为一个插件只发送表单中第一个多选框的值。但是我需要使用多个多选框元素。我认为我的操作都正确，可能有一些额外的“超级”选项可以控制这种行为。 - Igor
16
我也在公司寻找一个简单的多选框。我想要一个简单易用、高度可定制且除了 jQuery 之外没有其他大的依赖项。
我没有找到符合我的需求，所以我决定编写自己的多选框，并将其用于生产环境中。
以下是一些演示和文档：loudev.com 如果您想要贡献代码，请查看GitHub 存储库。
很好，这是一种我非常喜欢的不同方法。虽然我不确定我们会使用它，但它让我思考了我真正想要的用户界面是什么样子。谢谢！ - cincodenada
@lou，我在使用你的多选插件时遇到了一些奇怪的问题...我在这里的问题中解释了 --> http://stackoverflow.com/questions/16725015/multiselect-js-refresh-after-change .. 请问你能否看看我做错了什么。 - Adil Shaikh
14

  • 下载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: "全选", uncheckAllText: "取消全选", noneSelectedText: "未选择任何选项", selectedText: "已选#/#" //多选框会显示第二个#为总数 });

  • 样式可以进行更改

    ui-multiselect { //按钮 background:#fff !important; //background-color无法在此处生效 text-align: right !important; } ui-multiselect-header { //全选/取消全选行 background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //选项 text-align: right !important; }

  • 如果您想要重新填充选择，请刷新它：

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

  • 获取所选值（以逗号分隔）：

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

  • 清除所有选定的值：

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

我正在使用相同的JS和CSS，但是无法获取选中的值，请问您能指导我在哪里出错了吗？变量SelectedOptions = $（'#ddlColumn'）.multiselect（“getChecked”）.map（function（）{ 返回此值; }）。get（）; 警报（SelectedOptions）; - Rizwan Ali Sabir
1
请问您能指出相关文档和可用选项吗？ - Sonal
3
您可以使用chosen.i从以下链接下载所有文件： Chosen下载链接 
<!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 事件中，我该如何将一个数组应用到 chosen 中的选项？ - Charles Okwuagwu
不理解你想要什么。如果可能的话，请在StackOverflow上提出问题并分享你的问题链接。 - Syed Mhamudul Hasan
3
我希望筛选器可以让我用回车键选择最顶部的筛选元素，也许它能实现，但演示并没有展示。这看起来很有趣，我可能想要使用它，但目前我还是更喜欢jQuery MultiSelect的简单性，因此它仍然是优胜者，直到通过回车键选择成为该小部件的默认行为。 - Quaternion
此外，当筛选器处于活动状态时，如果上下箭头可以移动到选项列表中，那就太好了。 - Quaternion
链接无法使用。 - Lluis Martinez
1
我已经使用jQuery MultiSelect来实现带有复选框的多选下拉菜单。您可以从这里查看实现指南 - 带有复选框的多选下拉列表 实现非常简单，只需要使用以下代码即可。
$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
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);
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>
0

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

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

将其放在$(function() {...})或其他onload中。

编辑

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接