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

Question

У меня есть выбор, показанный на графике для дня присоединения. Он показывает 20 видимых дней и имеет 21 до 31 невидимых, но вы можете прокрутить их вниз. Из-за разметки страницы выделение идет вверх, а не вниз - выглядит странно.

Имея это в виду, могу ли я ограничить количество видимых опций выбора до 10? Например: показать от 01 до 10 и скрыть от 11 до 31, но их можно выбрать.

это можно сделать?

1010 * ТНХ *

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

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

Answer 3

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

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