首页 文章

jQuery multiselect下拉菜单

提问于
浏览 次
49

我有一个简单的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/但尚未找到我需要的内容 .

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

jquery jquery-ui jquery-plugins multi-select

9 回答

  • 3

    Update (2017): 以下两个库现在已成为与Javascript一起使用的最常见的下拉库 . 虽然它们是jQuery本机的，但它们已经过定制，可以处理从AngularJS 1.x到自定义CSS for Bootstrap的所有内容 . （选择JS，这里的原始答案，似乎已降至人气的第3位 . ）

    强制性截图如下 .

    选择2：
    Select2

    选择：
    Selectize

    Original answer (2012) ：我认为Chosen library也可能有用 . 它有jQuery，Prototype和MooTools版本 .

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

    Chosen library

    回复于
  • 76

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

    我没有找到符合我需求的东西，所以我决定自己编码 .
    我在 生产环境 中使用它 .

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

    如果你想贡献，请检查github repository

    回复于
  • 1

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

    回复于
  • 14

    通过大量的设置和调整来查看erichynds dropdown multiselect .

    回复于
  • 1

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

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

    回复于
  • 9
    <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);
    回复于
  • 0

    你可以破解你自己的，而不是依赖于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>
    回复于
  • 3

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

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

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

    你想做这样的事吗http://jsfiddle.net/robert/xhHkG/

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

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

    编辑

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

    回复于

相关问题