HTML Выберите + предел количества видимых опций

Ответ 1

На самом деле есть небольшой взлом, который может достичь этой странной нехватки возможности выбора количества элементов, отображаемых в SELECT TAG.

1 -

Предположим, мы хотим, чтобы SELECT отображал максимальное количество из 10 элементов. Добавление следующих событий js в ваш SELECT TAG достигнет этой цели:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'

Это обманет ваш SELECT, давая ему желаемый эффект, превратив его в размер SELECT.

2 -

Допустим, что в определенный момент времени будет меньше, чем максимум 10 элементов, которые мы хотим отобразить.

Предполагая, что вы получаете SELECT из SQL-запроса, вы можете сделать что-то вроде следующего: Как только вы знаете, сколько строк у вас есть запрос, вы можете включить следующее предложение в цикл

if($nRow<10){
  $nRowSelect=$nRow+1;
}
else{
  $nRowSelect=10;
}

Итак, если в каждом цикле меньше 10 строк, он выделяет нужное количество строк, которое он будет отображать.

onfocus='this.size=$nRowSelect;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'

3 -

Багги вытесняющие элементы. Так как этот хак заменяет общий SELECT с "размером один", он занимает пространство, в котором ему нужно перемещать содержимое, а не как обычный SELECT, который перекрывает содержимое под ним. Чтобы этого не произошло, если SELECT будет размещен, скажем в TD TAG, вы можете сначала разместить его в DIV со следующим стилем:

position:absolute;
z-index:1;

Это позволит размеру SELECT перекрывать содержимое под ним, как если бы это был обычный SELECT.

Ответ 2

Добавить атрибут size в <select>:

<select style=" width:100px;" size="2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Ответ 3

Поведение зависит от браузера и не контролируется автором. Вы можете использовать атрибут size = 10 в элементе, но он также изменяет меню на список, чтобы 10 параметров были видны даже в том случае, если меню не фокусируется. Чтобы добиться описанного поведения, вам нужно будет создать собственные элементы управления, используя JavaScript и CSS.

С точки зрения удобства использования поле ввода текста обычно предпочтительнее меню, когда нужно выбрать день месяца. Удобнее вводить одну или две цифры, чем выбирать из списка из примерно 30 элементов.