Как я могу ограничить видимые параметры в раскрывающемся списке HTML <select>?

Question

Как я могу ограничить количество отображаемых опций в раскрывающемся списке HTML <select>?

Например:

    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="20">20</option>
    </select>

Как я могу заставить браузер отображать только первые пять опций и прокручивать вниз для остальных?

Answer 1

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

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

у меня сработало

Answer 2

Вы можете использовать атрибут 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 для создания поддельного раскрывающегося списка.

Answer 3

Решение Raj_89 является наиболее близким к действительному варианту, хотя, как упомянул Кевин Свартс в комментарии, оно собирается сломать 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-index полезны, чтобы избежать перемещения других элементов, когда параметрыотображается.2) Используйте свойство currentTarget - это будет элемент select во всех браузерах.Хотя в IE будет выбран 'target', остальные фактически позволят вам работать с опцией.

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

Answer 4

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

select{
 position:absolute;
}

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

Answer 5

Я использовал этот код, и он работал для меня в 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>

Answer 6

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

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

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

Answer 7

атрибут 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>

Answer 8

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