jquery-ui: неактивный элемент selectmenu становится активным при повторном выборе элемента списка

277

28 ноября 2017, 20:36

Приветствую

Вопрос для людей которые копались (ну или использовали) библиотеку jquery-ui.

Для формирования выпадающих списков (dropdown list) использую библиотеку jquery-ui (преобразовывает select элемент), а именно компонент selectmenu, при этом стиль выпадающего списка переопределил под свои нужны, при этом ничего не меняя в структуру (т.е. все классы и элементы остались на своем месте).

Изначальный select элемент выглядит следующим образом

<select>
    <option disabled selected value = '0'>выберите одного из пользователей</option>
</select>

Дальше он динамически заполняется, после чего применяется функционал jquery-ui на элементе select.

<option disabled selected value = '0'>выберите одного из пользователей</option>

использует комбинацию

disabled selected

для того, чтобы в выпадающем списке первый элемент был бы неактивным и отображался бы серым, показывая пользователю, что надо выбрать одного из пользователей

когда пользователь раскрывает список, он может выбрать пользователя (в форме будут активированы дополнительные элементы) или вернуть неактивный первый элемент (выбрать "выберете одного из пользователей"), тогда никаких действий выполняться не будет.

Вопрос:

Если выбрать любой элемент меню, потом заново раскрыть выпадающий список и выбрать первый (неактивный) элемент меню - он будет отображен как активный элемент (черным цветом), а не как неактивный элемент (серым цветом). Если изначально при раскрытии выпадающего списка выбрать первый элемент, то он будет отображен корректно, т.е. серым.

В чём может быть проблема? Куда стоит смотреть?

Answer 1

Разобрался в чем проблема.

Теперь понимаю, что из вопроса никак бы нельзя было получить правильный ответ (слишком мало данных дал).

Сам ответ:

Функционал для того, чтобы disabled опции выпадающего списка отображались отличными от остальных опций берет должен брать на себя программист.

При подключении jquery-ui к элементу select надо дополнительно указать как должен отображаться выбор:

// подключить jquery-ui к элементу
$('#my_element').selectmenu({
    change: function(event, ui) {
        $('#my_element').selectmenu('option', 'classes.ui-selectmenu-text', ui.item.disabled ? 'my-selectmenu-placeholder' : '');
    },
    create: function() {
        $('#my_element').selectmenu('option', 'classes.ui-selectmenu-text', (elementForm.val() == null) ? 'my-selectmenu-placeholder' : '');
    },
});
// подключить свой класс к элементу
$('#my_element').selectmenu('menuWidget').addClass('my-selectmenu-placeholder');

А у меня была ошибка (опечатка)

change: function(event, ui) {
    $('#my_element').selectmenu('option', 'classes.ui-selectmenu-text', ui.item.disabled ? 'my-selectmenu-textholder' : '');
},