Что бы список раскрывался вверх (select, option)

#javascript #html #jquery #css

Подскажите, как сделать чтобы раскрывающийся список раскрывался вверх?


  All cuisines
  Arabian
  Asian
  Bagels


    

Ответы

Ответ 1

Со стандартным  сделать этот никак нельзя. Стандартный  кастомизируется
очень плохо. Несколько первых запросов гугла дают это ясно понять: тут и хабр. Особенно
это касается оформления .

Если вы хотите сделать красивейший , а тем более с раскрытием вверх, то вам
придётся писать свой select. Например, я использую блоки 
 и 
+ js в своих селектах. На хабре есть статья (ссылка выше), где автор использует 
+ 
 + .

Пример моего селекта с раскрытием вверх (может кто напишет лучше, а мой код, по его
мнению, плохой, тогда милости прошу написать свой ответ):

Содержимое HTML:


    
    
Arabian
    

        
All cuisines
        
Arabian
        
Asian
        
Bagels
    



А вот JS-код:

$(function(){
    $('.selected').click(function(){
        $('.option-list').slideToggle(200);
        $('.select').toggleClass('select-active');
    });
    $('.option').click(function(){
        select_val = $(this).attr('data-select-val');
        select_div = $(this).parent().parent();
        $(select_div).children('.selected').html($(this).html());
        $(select_div).children('input').val(select_val);

        $('.option-list').slideToggle(200);
        $('.select').toggleClass('select-active');
    });
});


CSS-код не менее важен:

.select{
    position: relative;

    width: 300px;
    height: 25px;
    border: 1px solid #000;
}
.selected{
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.option-list{
    display: none;
    position: absolute;
    bottom: 100%;
    left: -1px;

    width: 100%;
    border: 1px solid red;
    background: rgba(255,255,255,0.5);
    z-index: 2;
}
.option{
    width: 100%;
    height: 25px;
    cursor: pointer;
}
.option:hover{
    background: #fff;
}


Я сделал готовый пример на jsfiddle.

По умолчанию input и .selected содержат ваше дефолтное значение селекта. Я использую
$('.selected').html(), а не $('.selected').text();, потому что оптионы могут для красоты
содержать картинки и тд (например у меня именно так и есть - выбор языков с иконкой языка:


    
Русский



Вроде всё. Если что - спрашивайте.