chosen.js multiple select как добавить класс выбранному тегу

236
22 декабря 2018, 22:00

для своего проэкта я использую плагин chosen.js(https://harvesthq.github.io/chosen/) задача стоит в том что когда при выборе конкретного елемента из options добавить тегу этого Option определенный класс например giant panda (ему добавить класс pandas и любому элементу с этой группы), как это можно сделать

html:
<select class="js-send-category" multiple>
<optgroup label="pandas">
<option class="p-1" value="p-1">Giant Panda</option>
<option class="p-2" value="p-2">Green Panda</option>
</optgroup>
<optgroup label="bears">
<option class="b-1" value="b-1">Sun Bear</option>
<option class="b-1" value="b-2">Brown Bear</option>
</optgroup>
<option class="c" value="c">white cat</option>
</select>
Answer 1

Я нашёл решение, оно выглядит так, возможно не очень красиво, но работает ) Этот плагин при инициализации берёт все атрибуты тега option и теперь когда плагин построен у всех его кастомных елементов option есть этот класс который был на option. Когда мы чтото выбираем срабатывает событие change и мы можем глянуть value какого елемента мы выбрали, получив value мы находим елемент с таким же названием класс(p-1) как и value(p-1).

        var categoryOptionArr = [];
            $('.js-send-category').on('change', function(evt, elem) {
            if (elem.selected) {
                categoryOptionArr.push({
                    name: elem.selected,
                    ind: $(".js-categories-field").find("li."+elem.selected).attr("data-option-array-index")
                });
                categoryOptionArr.filter(function(el) {
                    var nameItem = el.name;
                    var letter = nameItem.charAt(0);
                    if (letter == "p") {
                        $(".search-choice").each(function() {
                            $(this).find(".search-choice-close[data-option-array-index="+el.ind+"]").parent().addClass("trg__color-1");
                        });
                    }
                    if (letter == "b") {
                        $(".search-choice").each(function() {
                            $(this).find(".search-choice-close[data-option-array-index="+el.ind+"]").parent().addClass("trg__color-2");
                        });
                    }
                    if (letter == "c") {
                        $(".search-choice").each(function() {
                            $(this).find(".search-choice-close[data-option-array-index="+el.ind+"]").parent().addClass("trg__color-3");
                        });
                    }
                });
            }
            });
READ ALSO
Галерея с превью

Галерея с превью

Сделал галерею с превью, Помогите как сделать в модальном окне так же что б переносились фото с превью и листались в модальном окне так же сохраняясь...

232
Конфликт функций jquery

Конфликт функций jquery

Извините за слишком простой вопрос, в jQuery почти не разбираюсь, а работу сделать надо

158