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

Question

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

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

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

ТНХ

Answer 1

Добавить атрибут 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 2

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

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

Answer 3

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

1 -

Допустим, мы хотим ВЫБРАТЬ отображение максимальное количество 10 штук. Добавления следующих Js событий в селектах TAG будут достичь этой цели:

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

Это обманет ваши ВЫБРАТЬ придав ему желаемый эффект превратить его в размере SELECT.

2 -

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

Предполагая, что вы получаете ваш ВЫБРАТЬ из запроса 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.