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
    25 мая 2016 в 10:34
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 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
    6 мар 2018 в 14:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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