Tell me how to make the drop-down list open up?

<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>
  • 3
    the native selects itself which way to open, and opens up if the drop-down list is too close to the bottom of the screen and does not fit into it when opened. - Grundy
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

With the standard <select> this cannot be done. Standard <select> customizes very badly. The first few Google queries make this clear: here it is . This is especially true of <option> .

If you want to make a beautiful <select> , and even more with disclosure up, then you have to write your select . For example, I use <div> and <input type="hidden"> + js blocks in my selects. On Habré there is an article (link above), where the author uses <label> + <div> + <input> .

An example of my select with disclosure up (maybe someone will write better, and my code, in his opinion, is bad, then you are welcome to write your answer):

HTML Content:

 <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>

But the JS-code:

 $(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 is equally important:

 .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; }

I made a ready-made example on jsfiddle .

By default, input and .selected contain your default select value. I use $('.selected').html() , not $('.selected').text(); because, for beauty, opticians can contain pictures and so on (for example, I have exactly this - choice of languages ​​with a language icon:

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

Look like that's it. If that - ask.

  • Thank! Great! - LADYX
  • @LADYX is always happy to help. ;) - intro94