I have a similar problem to #20 with VueJS.
The data is loaded dynamically with Vue but as no element was available at first, I added a dummy.

    <select multiple id="light-select">
            <option v-bind:value="value.name" v-for="value in lights">{{value.name}}</option>
            <option >ohoh</option>
    </select>

Yet, once I click on the dummy, it refreshes the data but it selects the first element in the real list and not the dummy.

Looks cool but alas I see no mention of conformance with WCAG 2.0 - it needs to be conformant to at least AA else it can't be used by otherwise conformant websites.

Hi @fabianlindfors ,
We are cdnjs team, we're going to host this library.
The git auto-updater in cdnjs relies on git tags so that it can recognize the correct version and automatically update the repo.
Could you please add git tags for the repo?

And could you please help me add more information into package.json to upstream?
eg. description, keywords, license, author, repository ... etc.
ref: https://docs.npmjs.com/files/package.json

If you have any suggestions, please let me know.
Thank you.

cdnjs/cdnjs#10550

Can I block header label?

when ajax reload data, what's the refresh method?

in order to report to the UX why a selection option is currently disabled a call back function would be be useful much alike attaching a function to limit_reached, Only this one should be sending back the option.value and option.text of the clicked disabled item for it to be further handled externally.

Again, great plugin. Thank you. it would be nice if you could add support for selected but "disabled" options. For example, a list contains names of people in a sales team and manager's name is "disabled" so it cannot be moved e.g.

<option value="manager" selected disabled>Manager</option>

I have made some changes in your minimized code to support this feature , so perhaps you can make use of it if you want to make it an "official" feature.

b.find("option").each(function(){
  var b=a(this),c=b.prop("value"),d=b.text(),f=b.is(":selected"),g=b.is(":disabled"); 
  e.push({value:c,label:d,selected:f,disabled:g, element:b})									
}),

and

if(c.selected){
  e.addClass("selected");
  if(c.disabled){ e.removeClass("selected").addClass("disabled"); } 
  var f=e.clone();
  f.click(function(){
    if(!c.disabled) { c.element.prop("selected",!1), b.change()
  }
}),

I guess, a similar thing should be done for a keyboard events handler.
Also in css i defined disabled class as:

.multi-wrapper .item.disabled {
    color:#ccc;
}

This is just a quick fix - it can be done much better :-)

Hi,
I'm trying to empty and then fill again the multi-select via Ajax. I see the Ajax works for a common multi-select filed, but if it is already using multi.js, it stays the same. How can I refresh the content? I see the multi.js already has a refresh_select function, but I don't know how to call it. Tahnks in advance!

Love the simplicity of this plugin, it would be great to have optgroup support though

Hi, This is a simple and nice plugins. I really like the UI. Good Job.

Is it possible to select option programatically?
I've tried to set value on select element using val() then trigger change() event but item is not moved to selected wrapper.

Thanks!

I noticed the plugin doesn't bring over "required" attributes or a functionality that validates if the field is required then no submission can be made. Is there a fix to this or is there an ability to do so already that I'm just not aware?

If JavaScript has disabled for example Blueberry after the multi has already been Initialized. Blueberry will not be shown as a disabled option until the user clicks e.g. Coconut. The other JavaScript should be able to ask for a redraw of the entire element.

Or how can I trigger a change() after initialization?

Hello,
Awsome work!
I have one question is it possible to dynamicly change the data source with AngularJS?
I'm getting data from http response and in every change I need to click on the list to see new data.
Thanks for the response :D

Hello,

It will be nice to have the possibility to search in the two lists.

Thanks.

Is there a way to programmatically disable the box? I set disabled dynamically on the select element (depending on the value of other input elements) but Multi.js doesn't seem to pick it up. The simplest solution would be a method in the API to turn it off and on.

Thanks!

Hello,

Nice plugin :).
It will be great if the plugin can take the datas from an URL with ajax.

thank you.

I'd love to be able to use this library through NPM / Yarn. Making updating to the newest version easier.

NOTE: There already are libraries using the name multi.js, not sure if that is a potential issue.

Thanks for the amazing work :)

Initializing multi does not check to see if the number of preselected options matched the passed in limit.

Example:

I am editing an existing record and thus my form loads with the following select HTML

<select id="multi" multiple="multiple">
  <option selected="selected">one</option>
  <option>two</option>
  <option selected="selected">three</option>
  <option>four</option>
</select>

When calling

multi(document.getElementById('multi'), { limit: 2 });

It initializes and I am able to select more than two options. If I select a third and then remove one of my options the limit will be triggered. Looks like the initialize function do not check for limit reached like the toggle_option function does.

I have described this issue in detail in this StackOverflow link

I think that readme is a bit incomplete. My proposal for improve it is this:

In installation or usage via NPM/Yarn I suggest to specify different ways to use it via modules:

For example import via js:

import multi from "multi.js/dist/multi-es6.min.js";
import 'multi.js/src/multi.css';
var select = document.getElementById("fruit_select");
multi(select);

Or another option is import js via module and styles via SASS:
@import 'multi.js/src/multi.css';

If you want I can make a PR including these two steps in README

Thanx!

How can we collect the selected items in an array in order to submit them somewhere?
Thanks!

Is there an option to preserve the order in wich the items are selected?
right now it keeps the selected column ordered like the available column

The tag for the 0.2.4 release seems to be missing on GitHub and thus is not available in yarn. Can you please add/push it?

I'm using multi in a popup , after i close the popup and pop again, there's old value in multi. how to clean it?

Is there any way that I can remove the order of the selected items? I want to arrange them by the order I selected them

when automaticly selecting items in code using the "Selected" value, the selected items is updating.. however, if there is a limit, and the selected number hits the limit, the rest isnt disabled as they are when im selecting it manually with the mouse.
If i deselect and item and select it again, the limit function triggers.

Is it possible to fix that or maybe have a go around? :-)

loads a long list (> 2000 items) very fast, way faster than multi-select script. However how do you trigger events on select or deselect? Or can you select an item by clicking a link? Such functionality would be extremely useful.

Hi there,

I have this code:

 $('#retention').remove(); // A previous instance of this dual list box.
for(let i  = 0; i < allCategories.length; i++) {

                        for(let j  = 0; j < selected.length; j++) {
                            let toggleSelected = (selected[j].id===allCategories[i].id)
                                ? " selected='selected'"
                                : ""
                            ;
                            options += '<option value="' + allCategories[i].id + '"' + toggleSelected + '>'
                                + allCategories[i].name
                                + '</option>';
                        }
                    }
                    console.log(options);

As you can see, the final statement is a console.log where is displayed the following result:
<option value="6">TEst</option><option value="5">Categoría 2</option><option value="4" selected='selected'>Categoría 1</option>

Again, as you can see, the last option has the selected attribute.

After doing this, the following lines were written:

document.getElementById("retentionDiv").style.display = "block";

                    // I get a clean instance of this object
                    $('#retention').multi({ non_selected_header: 'Categorías de retención disponibles',
                        selected_header: 'Categorías de retención que aplican'
                    });

                    $("#retention").append(options);

The issue here is none of these items are selected:

What should happen?
The last item should be selected and moved into the right select

What happens?
None of them are selected.

How can i let the multi select disabled or in readonly mode?
Tried some parameters but none worked.
Thanks

Hi, thank you for the good work! I was wondering if there is a possibility to set preselected items?

Hello !

Great plugin ! Looks AMAZING and really helped my users !

I want to know if there is a way to programmatically clear Filter/Searchbox input and show all the options available.

I tried everything, nothing works to show the options list back again...

     var select = $("select#" + select_id);

            select.parent().find(".search-input").focus();
            select.parent().find(".search-input").val('');  //Clear the input value...
            select.parent().find(".search-input").keyup();
            select.parent().find(".search-input").change();

            select.trigger("change");
            select.trigger("click");
            select.parent().find(".search-input").trigger("click");
            select.parent().find(".search-input").trigger("change");
            select.parent().find(".search-input").trigger("keyup");
            select.parent().find(".search-input").trigger("keydown");

Would be nice to have a select all / select none button. Possibly done as "Select All" on the left and "Clear" on the right.