Статьи и новости

Select2: настройки плейсхолдера

Базовые настройки

$(".change_auto").select2({
    templateResult: formatState, //функция для собственного дизайна контейнера, см. ниже
    minimumResultsForSearch: Infinity, //убрать поиск
    placeholder: "Нужно что-то выбрать",
    allowClear: true, //убрать поиск
});

function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    var $state = $('<span class="new-select"><div class="left"><img src="' + state.element.getAttribute("data-img") + '" class="img-flag" /></div><div class="right"><span class="info">' + state.text + '</span><span class="price">' + state.element.getAttribute("data-price") + ' руб.</span></div></span>'); //активно юзаем data-атрибуты
    return $state;
};

 

Сброс при наступлении события в соседнем dropdown:

('.changed-container').on('change', function(){
    $('.target-container-select2').html('<option value="">Нужно выбрать заново</option>');
}

 

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *