У меня есть выбор, показанный на графике для дня регистрации. Он показывает 20 видимых дней и от 21 до 31 не отображается, но вы можете прокручивать их вниз. Из-за макета страницы выбор идет вверх, а не вниз - выглядит странно.
С учетом этого я могу ограничить количество видимых опций выбора, чтобы сказать 10? Например: показать от 01 до 10 и иметь от 11 до 31 скрытых, но доступных для выбора.
Можно ли это сделать?
ТНХ
На самом деле есть небольшой взлом, который может достичь этой странной нехватки возможности выбора количества элементов, отображаемых в 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.
Добавить атрибут 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>
Поведение зависит от браузера и не контролируется автором. Вы можете использовать атрибут size = 10 в элементе, но он также изменяет меню на список, чтобы 10 параметров были видны даже в том случае, если меню не фокусируется. Чтобы добиться описанного поведения, вам нужно будет создать собственные элементы управления, используя JavaScript и CSS.
С точки зрения удобства использования поле ввода текста обычно предпочтительнее меню, когда нужно выбрать день месяца. Удобнее вводить одну или две цифры, чем выбирать из списка из примерно 30 элементов.