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

Ответ 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>

Ответ 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 для создания выпадающего списка поддельных.

Ответ 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", остальные фактически позволят вам работать с опцией.

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

Ответ 4

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

select{
 position:absolute;
}

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

Ответ 5

значение атрибута размера имеет значение, если размер = 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>

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

<p>Which one true?</p>
<select id="sel">
    <option>-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

(отображать только первый вариант из всех вариантов)

document.getElementById("sel").options.length=1; 

Ответ 9

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