This is great! Just what I was looking for.

I was thinking of swapping out the [span][i] checkboxes in favour of [input] checkboxes to avoid loading external graphics. But before I spent time working on it, I thought I'd ask: was there a compatibility reason (or other reason) for choosing [span][i]? (e.g., [input] won't work on Android or something like that?)

Thanks!

Team,

         I see an issue like, if I have dropdown and a button in page, Once after the selection in the multiselect dropdown, I need to click the button twice, as the focus of the dropdown still there on first click. How can we solve it.

Hi,

i have tested the Sumoselect methods like add, unselect item etc.. with an Ipad (Version 6). All the methods doesn't work.
The Problems i.e.: if you unselect an item with $("#test")[0].sumo.unSelectItem(0), the first item in the original select option is unselected correctly, but the Sumoselelect itself does not change. The item is still marked as selected. Sumoselect does not update its state.

Another problem: You cannot loop through items i.e:
$("#" + id + " option").each(function(i) {

$("#" + id)[0].sumo.unSelectItem(i);

    });

All these problems seems to be a I-Pad specific. I tested this issues with Safari Browser on my window machine. Everything works. Also with Chrome, Firefox and IE no problems.

Well. Next week I have to finish a bigger project and your sumoselect is a important part of it. Do you have planned your next release already?

It would be very nice, if you can check this issues & and the Issue I wrote you some days before.

Thanks for your answer
Jens

Sumoselect (multiselect) working fine in all browsers except IE11. Even it works fine in IE9 and IE10. There are 4,000 entries in multiselect. Why it is working slow in ie11? any solution?

great work. But is it possible to add palaceholder via attribute on single selects too?

Thanks.

I believe that if you have okCancelInMulti = false & triggerChangeCombined = true then the events should not fire until you close the box.

https://jsfiddle.net/zu1b7xev/

When the selectbox is on the bottom of an element with overflow: hidden;, it gets cropped and some of the options are unreachable for the user. Could you provide some way of setting a container element, so that the select box opens above the input in case it would colide with the containers bottom?

If option was disabled by default and enable programmatically it will have no click event:

if (opt.attr('disabled') || opt.parent('optgroup').attr('disabled'))
    li.addClass('disabled');
else
    O.onOptClick(li);

And if option was disabled programmatically it will still have click event.

Because createLi method calls only once during initialization for each option.

You may see the test here: http://jsfiddle.net/xp4kf9kx/2/

Really awesome plugin you have here @HemantNegi. One UI feature that I get a lot from clients is the ability for users to be able to create their own option if it's not pre-populated in the multiselect (think the "other" field in questionnaires).

I'll submit a pull request as soon as I have a bit of time to work on it, but wanted to find out if anyone else would find this helpful.

Hi Hemant,

your unload method has a big problem with multiselect fields. After unload the multiselect, the multiselect is useless. The Problem: the "name attribute" of the originell select get lost after unload. So, no saving of values etc....

Do you know a fix, workaround? Well, it is urgent...

Thanks & greets
Jens

Hi,
thanks so much for this tool. Very nice.

My problem is, that I have no chance to "redraw" or "update" or "destroy" the Sumo Selects. In many of my projects I have to disable some oder all options of a select element in dependency of other selects. Take for e.g: I have select "a" and a select "b". If user select an option in "a", select "b" should be disabled (or some options of "b").
Even if I manipulate the DOM, take out your wrapped Divs and write the select field into the DOM again (now with disabled options) and call this new select with $(selector).SumoSelect... nothing happens.

A hint would be great
Greetings
Jens

 $('select.SlectBox')[0].sumo.reload();

should give access to the select box, but the .SlectBox css class is not added to the node.

Added "if (!jQuery.isFunction( settings.nativeOnDevice[i] ))" to keep a string function from being applied on an object. Strangely this only broke pages that utilized mediaelement.js. Otherwise worked just fine. So far only tested on a PC, no mobile.

Hi,
I am running into an issue with form submission for multiple select.

To recreate issue:

//select
name = my_select[]
multiple = multiple
class = SlectBox

//js
$('.SlectBox').SumoSelect({okCancelInMulti:true, selectAll:true });

//form
action = get

//user action
select only one item and submit the form

The single option is not reported on submission.
On multiple selection, the last item is not reported on submission.

Hello,

The provided css is not compliant with https domains. This is due to the background-image :

background-image: url('http://graphics8.nytimes.com/packages/flash/business/20100325-FinancialTuneUp/gfx/checkbox.png');

Moreover, this image does not seems to be that essential : the same effect could be resolved using borders.

Hi,

thanks for the great plugin. I have an issue in IE8, it throws this error in jquery.sumoselect.js (also in minified version):
Line: 424
Char: 21
Error: Expected ':'

Any ideas? Thanks.

no require jquery

When I use Internet Explorer 11 to use the Sumoselect control white multiple selection, I cannot select an item from the dropdown menu. When the page is loaded I click on dropdown button, the menu appears. When I click in the flyout menu the menu disappears whithout selecting any item.

Confusingly sometimes the clicked item gets selected when I open the menu and wait for a while before clicking an item.

The Javascript console doesn't show any messages like errors. In other browsers (tested with chrome, firefox and opera) the same page works fine. The problem also appears on your demo page with Internet Explorer 11.

I find myself needing to use <optgroup> to split an option into two sub options as so:

<select>
        <option value="#option1">Option 1</option>
        <option value="#option2">Option 2</option>
        <option value="#option3">Option 3</option>
        <optgroup label="Option 4">
            <option value="#option4.1">Option 4.1</option>
            <option value="#option4.2">Option 4.2</option>
        </optgroup>
        <option value="#option5">Option 5</option>
        <option value="#option6">Option 6</option>
        <option value="#option7">Option 7</option>
    </select>

Is this possible?

I am trying to unslelect particular item but it is not working.
like - $('#parameter')[0].sumo.unSelectItem(3);
while its working fine with 0 index

Hi Hemant,

is it be possible to have a style for "optgroup"? With or without multiselect!

Best job,
John.

its display Uncaught TypeError: Cannot call method 'add' of undefined error, the normal ?

Is it possible to have the drop down stay opened at a fixed height, like a listbox?

I have two problem in IE8.
First is in line 306 - i was add 'toString()' before 'toLowerCase()' and now it's work.
second problem is in 'get' and 'set' - ie8 doesn't support getters and setters. I working on it.

Hi, how clear/uncheck all items?

The default CSS links images from (probably copyright protected?) external sources like 'http://graphics8.nytimes.com'. Also some sources are not https-links, which can lead to problems when used on a https domain.

Wouldn't it be possible to store those icons locally in a folder?

got this error when using jquery no-conflict with mootools
the problem is on line 310

this is because mootools implements its own methods and other stuff in js I think
one solution is to never use for-var-in loop, and use regular for loop instead
or other solution is to check with typeof == 'string' in for-var-in loop in this case

this is the console.log(settings.nativeOnDevice[i]); result from this loop:
Android
BlackBerry
iPhone
iPad
iPod
Opera Mini
IEMobile
Silk
function()
Array()
function(t, e)
function()
function()
function(t)
function(t)
function(t)
function(t, e)

happens like I said on line 310
if (ua.toLowerCase().indexOf(settings.nativeOnDevice[i].toLowerCase())

We have check all uncheck all and search option?

Is it possible to set a different text color for each option within a sumoselect control?

I tried the following but did not seem to take effect: (text color still black)

-  $("#sumoselectControl option")[aryOptionListIndex].style.color = "#FF00CC"

-  $.each(aryOptionList, function (key, value) {
            $('#sumoselectControl')
                .append($("<option style='color:#FF00CC;'></option>")
                .attr("value", value)
                .text(value))
        });

Any ideas?

Thanks!!
Steve

Nice plugin 👍

Ran into an outside click issue with a multi-select, a select all, and no Ok / Cancel buttons. If the user clicked outside after making their selections, the selected options are cleared.

Traced it back to this line:
if (O.is_multi && settings.selectAll)O._cnbtn();

Why is the O._cnbtn() function called here? Removing that call fixes this issue. Otherwise, the user must actually click on the CaptionCont to save the selections - which will not be obvious. Most users simply slick outside of a select to dismiss it, not click on the select again (even with the Ok / Cancel)

Edit: On 2nd thought, maybe this should be made on option as I do see it being useful in both use cases

Thanks.

Hi,

When a checkbox is checked or unchecked how do I get it to fire an event.
http://jsfiddle.net/p89ka9jq/22/

Thanks

Hello,

With many new pull requests coming, I think it would be good to have a dev branch where you can push new features, then we'll take the time to improve tests on this branch until merge can be safely done on master.

Placeholders do not seem to populate. I tried removing all other select boxes to see if that made a difference, but does not appear to affect it.

Here is my original code with 4 select boxes, only the last one seems to take effect (multiselect):
http://jsfiddle.net/pa7g8qwx/

And here is just a single example, placeholders do not appear to work on some of these elements for some reason...
http://jsfiddle.net/jf9u96ns/1/

I've tried determining what the difference between the select boxes are, but was unable to find anything that would indicate why this is happening.

Please advise!

Does the plugin not carry forward the required attribute from the html select or am I missing something. And that being the case, If we want to manually apply required attribute which element would it be? It is necessary for client side validation.

is it possible to remove this rule from the css file?

body, p, div, select { padding: 0; margin: 0; outline: none; color: #000; font-family: calibri; }

thank!

When using the control in the mode where the all of the items are shown, the selected item view port is not displayed properly, there is some clipping... see attached picture.

I was trying to add dynamically some li elements in the $( '.optWrapper .options ') via json, but after i added the elements i cannot select the added elements.

Code:

function ricreate_dep(){
    $.getJSON('index.php?dispatch=chat/ricreate_departments',function(json){ 
        $.each(json, function(key, val) {
    $('#group_id').append('<option value='+ val.id +'>'+ val.name +'</option>');
    $('.optWrapper .options').append("<li data-val=" + val.id + "><span><i></i></span><label>" + val.name + "</label></li>");
        }) 
        });
}

I cannot use $('select.SlectBox')[0].sumo.add('india'); because the SumoSelect is initialized from another function which creates dynamically a td row.
This function is called inside an ajax call.
Hope it's clear, because it's a bit complicated :-))
So is it possibile to delegate the click events instead of direct clicking the "checkboxes" (<i></i>) ?

Thanks in advance

It would be nice if it was possible to search the widget while typing.

No errors, just doesn't work.

Hello,
Your plugin is amazing but there is a bug. I am using with JQUERY UI tabs and when i click first tab everything is working well, until i am clicking second tab and regions are loading in the first tab. Should load to second tab.

screenshot from second tab

screenshot from first tab

thank you very much,

I am getting the following error in ipad
Error :
TypeError: 'undefined' is not an object (evaluating 'O.E.find('option[value="'+li.attr("data-val")+'"]')[0].selected=li.hasClass("selected")')

When I select any option the error is
Unable to set value of the property 'selected': object is null or undefined

I really like what you've done here, and here are a few things that I couldn't find, or hopefully you may add.

1. I couldn't find a way to manipulate the underlying select and then have the sumo select refresh its state. This would be nice, but if the other things are done, it's not absolutely required. You already update the select when items are added, which greatly simplifies my adoption!
2. How do you remove ALL of the items. In a select, you just set the options length to 0.
3. How do you clear all of the checked items in a multiselect? I believe that in a select, you just set the selected index to -1, however sumo dies if I do that!
4. How do you set the height of the dropdown if possible?

Great Control, Thanks!

Thanks for the work you've done in this - it looks great!

The only issue I have is that the default outputAsCSV value changes how the form submits data. It took me a while to work out why my form suddenly didn't work when I sumo'd it (and how to fix that). I had thought I was just changing the look and feel (as with similar widgets I've used for jQuery UI).

Would it not make more sense for a simple $().SumoSelect({}) to leave the form POST exactly the same as it was before the call? I would have thought most people using this would only be looking for browser-side changes.

I like this lite wieght plug in - I am running into a brick wall and hoping you might be able to help me out. I need to make cascading drop downs example (Genre:) once that is populated fill a second dropdown (Artists:) with json from a web service. I am new to writing plugins and have played around with your code but can't seem to figure it out. Any help would be appreciated.

A great feature on this would be having the possibility of getting attributes from the selected option, but since you can only get the selected option as value, that required ugly workarounds.

Hi,

When I set jQuery("#test")[0].sumo.disable(); I want only the Placeholder then to display 'Please Select a County First'.

At the moment I have $("#test").SumoSelect({ placeholder: 'Please Select a County First'}); , but that placeholder is also shown if no checkboxes are ticked.

Thanks

In my code I am working with extensions methods on Array prototype. And I have a issue with method "isMobile". The method has "for" that run on a collection "settings.nativeOnDevice" without checking if the collection has has own a property. Without the check the method throw exception when try to accept to extension method on the collection.
Could you please add validation to the method if the collection has own the property or to change it to regular for with index ?

Example:

isMobile: function () {
   var ua = navigator.userAgent || navigator.vendor || window.opera;
   for (var i in settings.nativeOnDevice)
        if (settings.nativeOnDevice.hasOwnProperty(i))
           if (ua.toLowerCase().indexOf(settings.nativeOnDevice[i].toLowerCase()) > 0)
               return settings.nativeOnDevice[i];
   return false
}

Thanks

Using 2.1.0. Placeholders aren't working at all.

$('.selectbox').SumoSelect({
     placeholder: 'Test Placeholder'
});

Is this not the correct way?

Not much to say … it would be very nice to have some support for optgroups.

Maybe collapsible group headings?