search

websemantics / Image-Select

Image Select is an extension of Chosen, a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. It provides image support for Single and Multi select HTML tags.
http://websemantics.github.io/Image-Select
MIT License
147 stars 44 forks source link

Optgroups get images added to them #12

Closed jitcoder closed 8 years ago

jitcoder commented 9 years ago

Symptoms: Optgroups get the image of the previous element with a data-img-src in them assigned to them for multi-select dropdowns.

because of the "mismatch-count" in the proceeding for-loop that loops through li's any options elements existing after some opt groups would not get their icons rendered.

Steps to reproduce:

Multi-select dropdown, with 2 opt-groups. 1st opt-group has 1 item with image#1 2nd opt-group contains a disabled option with image#2

Result -> noicon | optgroup icon | option icon | optgroup <-- error is here. there should be no icon here. icon | option

Steps to reproduce 2nd issue due to same block of code:

Multi-select dropdown with 2 opt-groups. 1st opt-group has 0 items 2nd opt-group contains a disabled option with image#2

Result-> noicon | optgroup noicon | option <-- error is here. there should be an icon here.

changing

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

to

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

fixed the issue. (line numbers 152 & 153)

jitcoder commented 9 years ago

Important Detail: this only seems to happen when a select dropdown is dynamically populated ie. from an ajax request

websemantics commented 9 years ago

Hi, the code you've mentioned does breaks the image rendering for the current plugin setup, can you provide a working example of the problem?

RomainSauvaire commented 8 years ago

I have the same issue here and added a

.group-result img {
    display: none;
}

To get rid of image display in optgroup with the following HTML

<select class="my-select">
    <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">First</option>
    <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Second</option>
    <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Third</option>
    <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Fourth</option>
    <optgroup label="pop">

        <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">First</option>
        <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Second</option>
        <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Third</option>
        <option data-img-src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png">Fourth</option>
    </optgroup>
</select>
capture d ecran 2015-10-23 a 13 39 22
RomainSauvaire commented 8 years ago

Why do you close ?