Placeholder option (Select an Option) messes up images

[c-prompt]

When you add empty option tags <option></option> at the beginning of your select to show a "Select" placeholder: ...the first image is blank and the other images are reordered. These are what the correct images should look like: This is what they look like when your first option is a placeholder: As you can see, "test" doesn't have an image and "test2" has the image "test" should have. The "test2" image isn't displayed at all.

[bookin]

Change to this

$this.on("chosen:showing_dropdown", function showing_dropdown(evt, _chosen){
                    // summery
                    //      This function is triggered when the chosen instance dropdown list becomes visible
                    //  For Chose custom events: http://forwebonly.com/jquery-chosen-custom-events-and-how-to-use-them/
                    //
                    // evt: Event
                    //      The event object
                    // _chosen: Object {chosen:Chosen}
                    //      Contains the current instance of Chosen class
                    var optionWithImgCount = $(chosen.form_field).find('optgroup[data-img-src], option[data-img-src]').length;
                    if(optionWithImgCount > 0){
                        var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
                        var options = $(chosen.form_field).find('optgroup, option');
                        var lIndex=0;
                        var endFor=lis.length;
                        for(var i = 0; i < endFor; i++){
                            var li = lis[lIndex];
                            var option = options[i];
                            var img_src = $(option).attr('data-img-src');

                            if(img_src != undefined){
                                lIndex++;
                                var template = html_template.replace('{url}',img_src);
                                $(li).prepend(template.replace('{class_name}','chose-image-list'));
                            }else{
                                lIndex--;
                                if(lIndex<0)lIndex=0;
                                endFor++;
                            }
                        }
                    }
                });

it's no excellent code but it's works

[c-prompt]

I ended up going in a different direction so didn't check if @bookin's code fixed the initial problem.

However, his code did seem to correct another problem. It's unclear when this problem began (maybe moving to jquery 2.1.3; maybe moving to chosen 1.4.1; maybe something else), but chosen selects that did not have any images for the dropdowns were causing all broswers to hang/timeout when the dropdown was clicked. I traced the problem to the if(img_src != undefined) block and substituted your code. The problem went away. Thanks.

[websemantics]

Hi @c-prompt , @bookin , thanks for your contributing to the plugin, ... I've tried the code suggested by bookin but it would hang the browser if the option does not have an image but does have text, ..

[c-prompt]

I noticed the browser hang just recently and tried tracking down what started it, but was unable. I upgraded to JQuery 2.1.3 from 2.1.1 and also upgraded Chosen to 1.4.1, but when I rolled them back to see if I could find the cause of the hang, I still saw it. Once I changed to @bookin's code, the problem went away.

[websemantics]

Thanks for that @c-prompt, Currently the plugin uses jquery-1.7.1.min.js, maybe if I upgrade I will get the results you mentioned, .. For now with the current setup, @bookin code breaks it .. I'll dedicate some time in the near future to get to the bottom of this, ..

[rayman813]

There is a much simpler solution to this issue. The problem is that these two arrays aren't matching up:

var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
var options = $(chosen.form_field).find('optgroup, option');

The first array is returning only the HTML options with values and the second one is returning all options regardless if it has a value or not.

Since chosen placeholders use the empty option we just need to remove that option from the options array. Simply add this code after:

var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
var options = $(chosen.form_field).find('optgroup, option');

options.splice(0, 1);

That will fix the issue and not hang the browser.

[c-prompt]

I tried @rayman813's suggestion but, on a dropdown with one item (with an image), it leaves the image off the dropdown until you select it. With @rayman813's code: With @bookin's code: Here's what the dropdown activated looks like:

[NickEngeldinger]

Thanks @rayman813 that solution worked nicely for me.