Вывести ограниченное количество option в select

331

01 марта 2017, 18:47

Добрый день, есть выпадающий список.

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>

Необходимо что бы при нажатии отображались только первые 4, а остальные можно было выбрать с помощью скролла. Заранее спасибо за ответ

Answer 1

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Синтаксис:

<select size="<число>">...</select>

Answer 2

Просто так это сделать не получится, но можно комбинировать атрибут size + JS.

$(function() { 
  var selectValue, 
      $cSelect = $('.custom-select__select'); 
   
  getVal(); 
  $('.custom-select__selected-text').text(selectValue); 
   
  $cSelect.on('change', function() { 
    getVal() 
    $('.custom-select__selected-text').text(selectValue); 
     
    $(this).blur(); 
  }); 
   
  function getVal() { 
    selectValue = $('.custom-select').find('option:selected').text() 
  } 
});

.custom-select { 
  position: relative; 
} 
 
.custom-select__select { 
  height: 0; width: 0; 
  opacity: 0; 
  position: absolute; 
  left: 0; top: 100%; 
} 
 
.custom-select__selected-text { 
  cursor: default; 
  display: inline-block; 
  padding: 1px 18px 1px 4px; 
  border: 1px solid #aaa; 
  border-radius: 1px; 
  position: relative; 
  font-size: 13px; 
  font-family: sans-serif; 
} 
 
.custom-select__selected-text:after { 
  position: absolute; 
  content: ''; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 6px 3px 0 3px; 
  border-color: #000 transparent transparent transparent; 
  top: 0; bottom: 0; right: 6px; 
  margin: auto; 
} 
 
.custom-select__selected-text:focus + select, 
.custom-select__select:focus { 
  height: auto; width: auto; 
  overflow-y: scroll; 
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="custom-select"> 
  <div class="custom-select__selected-text" tabindex="1"></div> 
  <select class="custom-select__select" size="6"> 
    <option value="1" selected>One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
    <option value="6">Six</option> 
    <option value="7">Seven</option> 
    <option value="8">Eight</option> 
    <option value="9">Nine</option> 
    <option value="10">Ten</option> 
    <option value="11">Eleven</option> 
    <option value="12">Twelve</option> 
  </select> 
</div>