Hi,

how is it possible to disable an selectbox via javascript? If I trigger a
$('#includedUsers').attr('disabled', 'disabled'); or document.getElementById("includedUsers").disabled = true
nothing happens with the multi selectbox. But if i check the status of the element via the JS console the disabled="disabled" flag is set but nothing really happens.

Greetings
Alex

Hi,

I'm trying to fill the select with id=aBrandsSelect with options loaded from ajax call.
Basically I insert items with this pies of code:

            $.each(data.ResultSet.Result, function(index, option) {
                $('#aBrandsSelect').append(
                    $('<option></option>').val(index).html(option)
                );

            });

How can I re-render this particular select to show the new options?
I'm sorry to bother you with this, but I didn't find answer on your page...

Thanks

If a multi-select has selected items, and is disabled, those items are rendered in the left-hand select box.

The code:
<select multiple='multiple' id='mult_sources' name='mult_sources[]' disabled='disabled'> <option value="55" selected="selected">red</option> <option value="66" >green</option> <option value="77" >yellow</option> </select>

Currently, selected items goes to the bottom of the 2nd list. It would be great if they were added to the 2nd list relative to their 1st list position. Removed items goes back to their correct positions on 1st list. Could be an option like keepOrder.

Thanks :)

http://www.codinghorror.com/blog/2007/04/pick-a-license-any-license.html

Hi

At first, sorry for possible stupid questions, due to I'm new in jQuery, javascript and github.

I want to add this great plugin to a new web site.
I've copied the demo in the host and it works fine but I cannot isolate the 'searchable' example. The selectable and selected boxes are shown and seem to work fine, but searching filter is ommited. Also, I've created some buttons to test selection methods but nothing changes.

This is the HTML code of my isolated example created on the root directory

HEAD

<title>jquery.multi-select.js - Isolated example</title>
<link href="css/multi-select.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.quicksearch.js" type="text/javascript"></script>
<script src="js/jquery.multi-select.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){ $('.searchable' ).multiSelect();  });

  ////////////////////////////////////////////////////////////////////////////////
  function select_all()
  ////////////////////////////////////////////////////////////////////////////////
  {
    alert("Selecting all countries");
    $('#select_countries').multiSelect('select_all');
  };

  ////////////////////////////////////////////////////////////////////////////////
  function deselect_all()
  ////////////////////////////////////////////////////////////////////////////////
  {
    alert("Deselecting all countries");
    $('#select_countries').multiSelect('deselect_all');
  };

  ////////////////////////////////////////////////////////////////////////////////
  function deselect_country(country_code)
  ////////////////////////////////////////////////////////////////////////////////
  {
    alert("Deselecting "+country_code);
    $('#select_countries').multiSelect('deselect', country_code);
  };

  ////////////////////////////////////////////////////////////////////////////////
  function select_country(country_code)
  ////////////////////////////////////////////////////////////////////////////////
  {
    alert("Selecting "+country_code);
    $('#select_countries').multiSelect('select', country_code);
  };

  ////////////////////////////////////////////////////////////////////////////////
  function deselect_country(country_code)
  ////////////////////////////////////////////////////////////////////////////////
  {
    alert("Deselecting "+country_code);
    $('#select_countries').multiSelect('deselect', country_code);
  };

</script>

BODY

<input type="button" name="select_france" value="Select all" onClick="select_all();" />
<input type="button" name="select_france" value="Deselect all" onClick="deselect_all();" />
<input type="button" name="select_france" value="Select France" onClick="select_country('fr');" />
<input type="button" name="select_france" value="Deselect France" onClick="deselect_country('fr');" />
     <div id='searchable_div' class='searchable' style='display:none'>
        <form id='searchable-form' action='#' method='post'>
           <select id='select_countries' name='countries[]' multiple='multiple' id='searchable-select'>
             <option value='fr'>France</option>
             <option value='ca'>Canada</option>
             <option value='ar'>Argentina</option>
             <option value='pt'>Portugal</option>
             <option value='us'>United States</option>
             <option value='gb'>United Kingdom</option>
             <option value='au'>Australia</option>
             <option value='ao'>Angola</option>
             <option value='aq'>Antarctica</option>
             <option value='bq'>Burkina Faso</option>
             <option value='cn'>China</option>
           </select>
           <input type='submit' value='submit' />
         </form>
      </div>

Thanks in advance

Hey guys, great work!

Im trying the plugin, and its really light. I use 3000+ itens, and its good enough. But i found a bug, or a missing feature, I dont know.
I have a list with a lot of equal items, with just a number different in the end. Then i want to search the equal names, then select only theses "searched" itens, but it select all...

Im trying to do something with the plugin, but i dont know javascript, so its difficult for me. Can you make or give me a light?
Thanks ^^

I found a minor problem in the searchable sample code which I thought i'd point out in case anyone else wonders why their search box vanishes when trying to enter a search term!

The sample code is

but should be

First off, I just discovered this plugin and think it's fantastic -- Good work.

You currently have two options -- "selectableHeader" and "selectionHeader" -- that let you create headers for the lists. Would be nice if there were footer-related options, a la "selectableFooter" and "selectionFooter", too.

I know footers could probably be added after the fact with some additional jQuery, but it'd be nice to have an "official" solution.

It would be nice to be able to drag and drop elements in the "selected" list into a new order.

Is it possible to have the optgroup select all contained options when clicked on?

i am using ajax to put the multiple select box in and if i ajax it twice (which replaces the content of the div) the multiple select gets added twice??

You'll get all option combiened as one, in the first field of each optgroup. this field is followed by each field as a sepaerate option.

Example:
Friends
Yoda Obiwan
Yoda
Obiwan
Enemies
Palpatine Darth Vader
Palpatine
Darth Vader

Also you'll get:

TypeError: $(".ms-elem-selectable", selectableUl).on is not a function: 
$('.ms-elem-selectable', electableUl).on('mouseenter', function(){
in
jquery.multi-select.js (line 81)

This problem is solved with the version from your demopage in the jquery.js file.

the version from jquery.js also suffers a problem on init:

TypeError: selectedLi.on is not a function
selectedLi.on('mouseenter', function(){
jquery.js (line 236)

and this one on selecting an item:

TypeError: selectedLi.on is not a function
selectedLi.on('mouseenter', function(){
in
jquery.js (line 236)

tested with FireFox 14.01

markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>multiselect.js</title>
    <meta description="This a tiny jQuery plugin which aims to be a drop-in replacement for the standard &amp;lt;select&amp;gt; element with multiple attribute activated. It's free, open source and it works in an unobstrusive fashion." />
    <link href="css/multi-select.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
  </head>

<body>


<select id='optgroup' multiple='multiple'>
  <optgroup label='Friends'>
    <option value='1'>Yoda</option>
    <option value='2'>Obiwan</option>
  </optgroup>
  <optgroup label='Enemies'>
    <option value='3'>Palpatine</option>
    <option value='4'>Darth Vader</option>
  </optgroup>
</select>


 <script src="js/application.js" type="text/javascript"></script>



</body>
</html>

All files downloaded from http://loudev.com/ or from github

@lou I was wondering what your opinions on jquery ui where?

I have looked over the source and it seems like it would not be too hard to convert the plugin to themeroller. So I am going to have a go at that just to make it look more consistent with the rest of my site. Would you like me to send that back as a pull request or would you prefer to stay with your own styles?

hi lou!
First,please let me apologize for my poor English.
cause i'm japanase shit.

current mulit-select is not working at under IE7.
after get attribute,it's can get over 100 items,should check DomNode or Not.

folowing code should change (line 75)

70 var attributes = "";
71
72 for (var cpt = 0; cpt < this.attributes.length; cpt++){
73 var attr = this.attributes[cpt];
74
75 attributes += attr.name+'="'+attr.value+'" ';

76 }

like that

            if(isDomNode(attr.name)){
                attributes += attr.name+'="'+attr.value+'" ';
            }

isDomNode Function

function isDomNode(e){
if((e && typeof(e.nodeType) == 'number') || e === null){
try{
e.nodeType = e.nodeType;
}catch(n){
return true;
}
}
return false;

}

next,css have little problem too.
arrow image dosen't display at under IE7.
ms-container should set height.

I used your plugin for select with many items (~3000).
Its works but take ~3mins to render with many FF warning about endless loop.

I did some modification and now it take ~6secs.
The idea is first to prepare all items before adding them to DOM.

                optgroupLiTemplate = '<li class="ms-optgroup-label"><span></span></li>',
                containers = {};

                ms.find('optgroup, option').each(function(){

                        ....
                        /*
                        if (optgroupId){
                            that.$selectableUl.children('#'+optgroupId+'-selectable').find('ul').first().append(selectableLi);
                            that.$selectionUl.children('#'+optgroupId+'-selection').find('ul').first().append(selectedLi);
                        } else {
                            that.$selectableUl.append(selectableLi);
                            that.$selectionUl.append(selectedLi);
                        }
                        */

                        var container = optgroupId || 'main';
                        if(!containers[container]){
                            containers[container] = [[],[]];
                        }
                        containers[container][0].push(selectableLi);
                        containers[container][1].push(selectedLi);
                    }
                });
                for(var id in containers){
                    if (id !== 'main'){
                        that.$selectableUl.children('#'+id+'-selectable').find('ul').first().append(containers[id][0]);
                        that.$selectionUl.children('#'+id+'-selection').find('ul').first().append(containers[id][1]);
                    } else {
                        that.$selectableUl.append(containers[id][0]);
                        that.$selectionUl.append(containers[id][1]);
                    }
                }

Reproduce Optgroup bug one:

1. Expand some option group.
2. Select an option so it sits in the 'selected' list.
3. Collapse the option group.
4. Trash your selected item.

The option group the trashed item belongs to is still collapsed and the item is sitting under it.

Reproduce Optgroup bug two (this is a bug in the example code and not the lib):

1. Expand some option group.
2. Select an option so it sits in the 'selected' list.
3. Collapse the option group.
4. Expand the option group.
5. The 'selected' option reappears in the 'selectable' list but it should not be there.

First of all - GREAT TOOL - Thank you for writing this one.

In the searchable feature, when you select an item and move it over to the right hand side, it
still displays in the available list. Can we disable it from displaying in the available list once it
is selected.

regards
Jyothi

It works, but strangely works in iOS(iPhone). Click on item added to the list, but also shows the standard multi-select.

Hi Lou !
It is a great multiselect plugin ....
But it would be appreciable if their will be support for jquery validation plugin ...

Thanks

What happens if you need more than one choice for each select option? For example, Let's imagine I had a table with two columns of checkboxes:

Name | Displayed | Required

John Doe | Checkbox | Checkbox (appears if the left checkbox is checked)
Jane Doe | Checkbox | Checkbox (appears if the left checkbox is checked)
etc...

I would love to have 3 choices for multiselect.js - "not selected" "displayed" and "required" - this is just an example, I could think of even more uses for this.... Is this possible?

Hi
is there a known issue with using the keyboard to do selection? what i'm seeing is that if i use the space to select, and then I call the hooks, e.g. deselect_all, then it doesn't work, but when i select using the mouse, the hooks work fine...

do you know what could be going wrong there?

When calling 'select' method, the following error occurs: "Uncaught TypeError: Object 3 has no method 'replace'", in line 441.

Code with erro:

sanitize: function(value){
return(value.replace(/[^A-Za-z0-9]*/gi, '_'));
}

Suggest solution:

sanitize: function(value){
  if(typeof(value) == 'number'){
    value = value.toString();
  }
  return(value.replace(/[^A-Za-z0-9]*/gi, '_'));
}

I stubmled on a difference between what's written on a demo page as a sample source code for searchable multiselect and actual source of the demo.

The sample code was causing showing list items in both selectable and selection list in latest Chrome (and maybe others too) with jQuery 1.8.3

Sample code on http://loudev.com/#demos - Searchable:

$('#search').quicksearch( 
    $('li', '#ms-searchable' )).on('keydown', function(e){

Actual code of demo:

$('#search').quicksearch(
    $('.ms-elem-selectable', '#ms-searchable' )).on('keydown', function(e){

After using class name instead of just li, all worked.

Can we add a search for a user in the list function? Like this:

http://quasipartikel.at/multiselect/

With many (tousands...) items, the select_all function becomes very slow. We found that the following change improves the speed drastically:

~ line 290:

-    ms.find("option:not(:selected)").each(function(){
-        var value = $(this).val();
-        if (visible) {
-          var selectableLi = selectableUl.children('li[ms-value="'+value+'"]');
-          if (selectableLi.filter(':visible').length > 0){
-            ms.multiSelect('select', value, 'select_all');
-          }
-        } else {
-          ms.multiSelect('select', value, 'select_all'); 
-        }
-      });
+ 
+    if (visible) {
+       selectableUl.find(":visible").each(function(){
+            ms.multiSelect('select', $(this).attr('ms-value'), 'select_all'); 
+       });
+    } else {
+       ms.find("option:not(:selected)").each(function(){
+            ms.multiSelect('select', $(this).val(), 'select_all'); 
+       });
+    }

Cheers
Pascal

Refresh was broken as of #55. According to #65 this was fixed in aa1d553, but it isn't.

All I'm trying to do is to add an option dynamically to the list by appending a htmlString to my select. The refresh function does not handle this properly:

• Custom headers are duplicated
• No click handlers on most of the options
• Clicking one option selects the whole list

Then I thought, hey, why not create a new multiselect altogether. So I removed ms-container from the DOM and re-called multiSelect with my options. Same result! I really wonder where the elements I previously removed from the DOM are coming from. Is there a way to destroy this multiselect completely to start over?

The current CSS locks the multiselect down to a small size (around 350px). You wouldn't need to change too much to get it to be responsive and fit the entire width it is given.

The main changes would be at line 54 and line 2, changing the values to percentages.

I am using an ajax call to load options into a second select. The options load and I am calling the 'refresh' function on the second select however all the options are disabled and I do not understand why.

I am creating select #1 using this code

$('#store').multiSelect({
    afterSelect: function() {

            //console.log("test");

            var report_list = GetReportList();
            //alert(GetReportList());
            $("#report").html(report_list);
                            //once the values are loaded, put them in report select
            $('#report').multiSelect();

    }   

});

Here is the function GetReportList

function GetReportList() {

            var selObj = document.getElementById('store');

            var selections="";
            for( var i=0; i < selObj.options.length; i++)
            {
                if(selObj.options[i].selected)
                    selections += "," + selObj.options[i].value;
            }       

            var url="ajax/report_actions.php?action=fill_report_dropdown&dbid="+escape(selections.substring(1));

$.ajax({
    type: "GET",
    url: url,
    //data: memberid,
    async: false,
    success: function(data) {
       result = data;
       console.log(data);
    }
});
return result;

}

Does this support jquery 1.7.*

Is it possible that you can add a function, where i can sort the selected data?

Could you please make selected objects have option for sorted or not. Because in some condition the position for selected fields is important.

example:
$(element).multiselect({selectedSort: false});

many thanks,
yacobus reinhart

Hi, it would be nice if the optgroups appeared in the ‘selected’ container as well as the ‘selectable’ one.

Great plugin - thanks,
Matt

Hi,

I love this and would like to get it to work in my Rails app.

I can't get the 'deselect' to work in Rails; selecting is fine, but clicking the right column doesn't do anything, not even the AfterDeselect event fires. No errors on java console.

I've set up a bare bones rails app to debug; I've probably missed something extremely obvious (bit of a noob with JS).

Any insights much appreciated!!!

Here's my test rails app:
https://github.com/dongennl/multiselect_rails

Many thanks!!

I am using the select method as follows:

$('#my-select').multiSelect('select', valueArray);

The values in the array are correctly added and displayed. But when I click on
the submit button, the values are not in $('#my-select').val();

Thanks for any advice and great plugin btw.

I'm looking for a way to add a search box on the second column
Base on your example using 'quicksearch' on http://loudev.com/

So I will have 2 search box one on each column.
Thanks

I dynamically add a multi select control to the dom, after that I call the .multiselect() method.

Visually everything is ok, but I can't click on any item.

not only i want konw which items were seleced,,but also what order these selected items was..

so i do it as below , Is there other easy way ?

$(document).on("submit", "form", function(event){
    var mselect = $('#myselect');
    var ms = $('#ms-myselect');
    var ids = $.map(ms.find('.ms-selection li[ms-value]'),function(e){return $(e).attr('ms-value')})

    mselect.append(mselect.find("option").remove().sort(function(a, b) {
      return ids.indexOf($(a).val()) > ids.indexOf($(b).val());
    }));
  });

EDITED:

Hello,
I was asking for a single demo on one page to see exactly how things were setup and called on the page because I couldn't get it working. I figured out my problem but would still like to see a full demo on a page by itself (especially if it could be included with the download).
Thanks

When using the below configuration to dynamically generate a select element and dynamically load the options, the first item becomes unselectable.

Refresh option don't refresh object. It clones records in it.
UPD:
Sorry, i already find the description of that method. I just want dynamically add options to the select field. And i need reload data or something like that.

I'd like to add a plus sign icon or text on which the user can click to select the option. The purpose it to add a separate click handler to the option text. In my case, clicking the option text would show a popover with some information about the option.

I've accomplished this using hover instead of click, but it doesn't suit my purposes.

At line number 66:

Change:

var values = optgroup.children(':not(:selected)').map(function(){ return $(this).val(); }).get();

into

var values = optgroup.children(':not(:selected):not(:disabled)').map(function(){ return $(this).val(); }).get();

Hi,

Your multiselect is wonderful. I am trying to use it to save the SELECTED items in a database, and then re-display those items on the SELECTED box. Unfortunately, I tried to display them again with:

$('div.ms-selection .ms-list').append(innerHTMLString)

But nothing displayed on the SELECTED box is being recognized, when I try to hover over the items or even de-select the items, it doesn't work. Can you assist on how I can display my selected items on the SELECTED box dynamically to be recognizable by the server, so that when I submit my form, all the items will be in my String[] ?

Thanks.
Sy

I am using the afterSelect callback to limit the number of items that can be selected to four. It works fine when using the mouse, but if keyboard selection is used, it doesn't seem to work at all. Adding some debug output to the method revealed that the count I'm getting back from $("#mycontrol :selected").length is not correct (and the actual selected values are incorrect as well).

I'll try to work up a simple example test soon and upload it, but the callback declaration I'm using looks like this:

afterSelect: 
    function(value) {
        //limit selected items to no more than 4
        var count = $("#mycontrol :selected").length;
        if (count > 4) {
            $("#mycontrol").multiSelect('deselect', value);
        }
    }

Of course, I'm more than willing to accept that I'm doing something completely stupid here...

(update)

Okay. Here's a relatively self-contained test, though you'll need to fill in the location of your multi-select files (I couldn't find a CDN location for them). To demonstrate the problem, do as follows: tab to the multi-select control, use the arrow keys to navigate, and the space bar to add. You will be able to add more than four items. However, if you use the mouse, only four items can be selected (as desired).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!-- Includes for jquery and jquery-ui -->
    <link type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />   
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <!-- Includes for 3rd-party jQuery-based multiselect -->
    <link type="text/css" href="/path/to/multiselect/css/multi-select.css" rel="stylesheet" />
    <script type="text/javascript" src="/path/to/multiselect/js/jquery.multi-select.js"></script>

    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
    <form action="#">
        <select name="myitems" id="mycontrol" multiple="multiple">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
            <option value="10">Option 10</option>
        </select>
        <input type="submit">
    </form>

    <script language="JavaScript"><!--
        function initializeDocument() {
            //enable multiselect
            $("#mycontrol").multiSelect({
                afterSelect: 
                    function(value) {
                        //limit selected items to no more than 4
                        var count = $("#mycontrol :selected").length;
                        //window.alert(value + " selected. count is " + count);
                        if (count > 4) {
                            //window.alert("deselecting " + value);
                            $("#mycontrol").multiSelect('deselect', value);
                        }
                    }
            });
        }

        $(document).ready(initializeDocument());
    //--></script>
</body>
</html>

In the demos in the doc the code for "http://loudev.com/#demos" does not seem to have any options selected, but the actual code in the site does.

I currently want the user to select a maximum of 6 items.
In the afterSelect callback, I retreive the ammount of selected items, and when this number is greater than 5, I want to disable the box.

I do this like so:

[code]
afterSelect: function(value, text){
var array = $('#multiselect').val();
if(array.length>5)
$('#multiselect').attr('disabled','disabled');
},
[/code]

The disabled attribute is successfully added to the DOM element. However, I can still keep on selecting items.

Is there any other approach I should be following?