Как я могу сделать список выбора короче, когда он открыт? [Дубликат]

Я использовал этот код, и он работал для меня в Chrome, Firefox и IE.

<select  onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()"  onblur="this.size=0;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>

Невозможно ограничить количество видимых элементов в раскрывающемся списке выбора (если вы используете его как раскрывающийся список, а не как список).

Но вы можете использовать javascript / jQuery для замены этого selectbox с чем-то другим, которое просто выглядит как раскрывающийся список. Затем вы можете обрабатывать высоту выпадающего списка по своему желанию.

jNice будет плагином jQuery, который имеет такие функции. Но для этого существует множество альтернатив.

Использовать атрибут size для <select>;

Вы можете попробовать это

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
             <option value="1">This is select number 1</option>
             <option value="2">This is select number 2</option>
             <option value="3">This is select number 3</option>
             <option value="4">This is select number 4</option>
             <option value="5">This is select number 5</option>
             <option value="6">This is select number 6</option>
             <option value="7">This is select number 7</option>
             <option value="8">This is select number 8</option>
             <option value="9">This is select number 9</option>
             <option value="10">This is select number 10</option>
             <option value="11">This is select number 11</option>
             <option value="12">This is select number 12</option>
           </select>

Это сработало для меня

Решение Raj_89 является самым близким к тому, чтобы быть допустимым вариантом altough, как упоминал Кевин Свартс в комментарии, он собирается разбить IE, что для большого числа корпоративных клиентов является проблемой (и говорит вашему клиенту, что вы не будете кодировать IE «потому что причины» вряд ли сделают вашего босса счастливым;)).

Итак, я играл с ним, и вот в чем проблема: событие onmousedown бросает подгонку в IE, поэтому мы хотим предотвратить по умолчанию, когда пользователь нажимает раскрывающееся меню для первого время. Важно, что это только время, когда мы делаем это: если мы предотвратим дефолт при следующем щелчке, когда пользователь сделает выбор, событие onchange не будет срабатывать.

Таким образом, мы получаем красивое выпадающее меню, без мерцания , без разбивки IE - просто работает ... ну, по крайней мере, в IE10 и выше, и последние отношения со всеми другими основными браузерами.

<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
    <option></option>
    <option>IE 9</option>
    <option>IE 10</option>
    <option>Edge</option>
    <option>Firefox</option>
    <option>Chrome</option>
    <option>Opera</option>
</select>

Вот скрипка: https://jsfiddle.net/88cxzhom/27/

Немногие вещи, чтобы заметить: 1) абсолютное позиционирование и установка z-индекса помогают избежать перемещения других элементов при отображении параметров. 2) Используйте свойство currentTarget - это будет элемент выбора во всех браузерах. Хотя «цель» будет выбрана в IE, остальное на самом деле позволит вам работать с опцией.

Надеюсь, это поможет кому-то.

Tnx @ Raj_89, твой трюк был очень хорошим, может быть лучше, только с помощью дополнительного стиля, который делает его на других объектах dom, точно так же, как обычный тег select select в html ...

select{
 position:absolute;
}

u может видеть результат здесь: http://jsfiddle.net/aTzc2/

имеет значение атрибут size, если размер = 5, тогда будут показаны первые 5 элементов, а для других вам нужно прокрутить вниз.

<select name="numbers" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

Вы можете использовать атрибут size, чтобы <select> отображался как поле вместо выпадающего списка. Число, которое вы используете в атрибуте size, определяет, сколько опций отображается в поле без прокрутки.

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

• http://jsfiddle.net/cSSjF/

Вы не можете применить это к <select> и , хотя он все еще отображается как раскрывающийся список. Браузер / операционная система решит, сколько опций должно отображаться для выпадающих списков, если вы не используете HTML, CSS и JavaScript для создания выпадающего списка поддельных.