When have multi selects some doesn't works

[nunowar]

I use this plugin and yesterday I update from v0.11.2 to v0.12.0, and some selects crashed.

They have content but appears without content after rendering.

I use last version of jQuery.

$('.select').selectize();

[brianreavis]

Need more info – what's the HTML of the selects look like?

[nunowar]

http://pastebin.com/dQ7yS0id

The select with name="mes" doesn't works and name="uti_sexo" doesn't works too.

[Alex-Sokolov]

Same issue.
Generated HTML:

<div class="row">
    <div class="column column-w" data-label="Фамилия">
        <select class="selectColumns" multiple="" name="Pages[0].ColumnsMergeSettings[0].ValueMergeRules">
            <option value="">Выберите колонки документа...</option>
            <option selected value="1">
                Колонка #1
            </option>
            <option value="2">
                Колонка #2
            </option>
            <option value="3">
                Колонка #3
            </option>
            <option value="4">
                Колонка #4
            </option>
            <option value="5">
                Колонка #5
            </option>
        </select>
    </div>
    <div class="column column-w" data-label="Имя">
        <select class="selectColumns" multiple="" name="Pages[0].ColumnsMergeSettings[1].ValueMergeRules">
            <option value="">Выберите колонки документа...</option>
            <option value="1">
                Колонка #1
            </option>
            <option selected value="2">
                Колонка #2
            </option>
            <option value="3">
                Колонка #3
            </option>
            <option value="4">
                Колонка #4
            </option>
            <option value="5">
                Колонка #5
            </option>
        </select>
    </div>
    <div class="column column-w" data-label="Отчество">
        <select class="selectColumns" multiple="" name="Pages[0].ColumnsMergeSettings[2].ValueMergeRules">
            <option value="">Выберите колонки документа...</option>
            <option value="1">
                Колонка #1
            </option>
            <option value="2">
                Колонка #2
            </option>
            <option selected value="3">
                Колонка #3
            </option>
            <option value="4">
                Колонка #4
            </option>
            <option value="5">
                Колонка #5
            </option>
        </select>
    </div>
    <div class="column column-w" data-label="Должность">
        <select class="selectColumns" multiple="" name="Pages[0].ColumnsMergeSettings[3].ValueMergeRules">
            <option value="">Выберите колонки документа...</option>
            <option value="1">
                Колонка #1
            </option>
            <option value="2">
                Колонка #2
            </option>
            <option value="3">
                Колонка #3
            </option>
            <option selected value="4">
                Колонка #4
            </option>
            <option value="5">
                Колонка #5
            </option>
        </option>
    </select>
</div>
</div>

Without selectize.js

When init with code:

$('.selectColumns').selectize({
    plugins: {
        'remove_button': { title: 'Удалить выбранный вариант' }
    }
});

But I found workaround! With code:

$('.selectColumns').each(function () {
    $(this).selectize({
        plugins: {
            'remove_button': { title: 'Удалить выбранный вариант' }
        }
    });
});

All work as need

Using selectize.js (v0.12.0)

P.S.: Same problem when need to clear all selects in form. Can't clear all selectized inputs with one line

$('.selectColumns').each(function () {
    this.selectize.clear();
});

[robertsass]

I had the same issue and I really have no clue, what was causing it.
I used Bootstrap Tabs and had three identical selects: on one tab one select, on the other two (one of them in a modal dialog). The last one in the modal was empty, while another different select in that modal worked fine.

Initializing them by using .each() worked for me too.

[bb1]

Had the same problem but the workaround that Alex-Sokolov posted worked just fine.
I got a large amount of selects with a lot of options (~100000). Maybe there is a buffer that just runs full.
I'm using FireFox btw.

[anaphel]

Same issue for me, with just a few options.
Had to do a loop on each select to make it work.

[jensljungblad]

+1

[johanhalse]

It seems the optionsMap variable isn't being reset between selectize initializations. When using $('.foo').selectize() you only get one instance of Selectize which re-uses the optionsMap var between select elements.

A quick fix is adding optionsMap = {}; to the init_select function here: https://github.com/brianreavis/selectize.js/blob/master/src/selectize.jquery.js#L47

I don't know the code well enough to know if that breaks anything else though.

EDIT:
Looks like this is already fixed in master? f6c9ac9
But looking at the standalone dist js (which is what I'm using) the fix isn't there:
https://github.com/brianreavis/selectize.js/blob/master/dist/js/standalone/selectize.js#L3292

[brianreavis]

@johanhalse (and others) This was fixed by #717, which is now part of 0.12.1

[Alex-Sokolov]

@brianreavis Thanks! Work now in 0.12.1

But is it way to clear all selectized inputs without .each()?

$('.selectColumns').each(function () {
    this.selectize.clear();
});