3

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

<select id="pick-filter">
  <option value="">All cuisines</option>
  <option value="1">Arabian</option>
  <option value="2">Asian</option>
  <option value="3">Bagels</option>
</select>
2
  • 3
    нативный селект сам выбирает в какую сторону открываться, и открывается вверх, если выпадающий список находится слишком близко к низу экрана и при открытии не вместится в него.
    – Grundy
    Commented 25 мая 2016 в 10:34
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 25 мая 2016 в 13:19

1 ответ 1

7

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

Если вы хотите сделать красивейший <select>, а тем более с раскрытием вверх, то вам придётся писать свой select. Например, я использую блоки <div> и <input type="hidden"> + js в своих селектах. На хабре есть статья (ссылка выше), где автор использует <label> + <div> + <input>.

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

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

<div class="select">
    <input type="hidden" name="item" value="1">
    <div class="selected">Arabian</div>
    <div class="option-list">
        <div class="option" data-select-val="0">All cuisines</div>
        <div class="option" data-select-val="1">Arabian</div>
        <div class="option" data-select-val="2">Asian</div>
        <div class="option" data-select-val="3">Bagels</div>
    </div>
</div>

А вот 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();, потому что оптионы могут для красоты содержать картинки и тд (например у меня именно так и есть - выбор языков с иконкой языка:

<div class="option" data-select-val="ru">
    <div class="ico-lng ico-lng-ru"></div>Русский
</div>

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

1
  • @LADYX всегда рад помочь. ;)
    – NekoCoder
    Commented 6 мар. 2018 в 14:52

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.