it-swarm-pt.tech

Seleção HTML + número limite de opções visíveis

enter image description here

Eu tenho o seletor mostrado no gráfico para um dia de inscrição. Ele mostra 20 dias visíveis e tem 21 a 31 não visíveis, mas você pode rolar para baixo até eles. Devido ao layout da página, a seleção aumenta para cima, em vez de para baixo - parece estranha.

Com isso em mente, posso limitar o número de opções de seleção visíveis para dizer 10? Por exemplo: mostre 01 a 10 e tenha 11 a 31 oculto, mas disponível para seleção.

isso pode ser feito?

tHX

12
Adam

Na verdade, existe um pequeno truque que pode atingir essa estranha falta de possibilidade de escolher o número de itens exibidos no SELECT TAG.

1 -

Digamos que queremos um SELECT exibindo um número máximo de 10 itens. Adicionar os seguintes eventos js ao seu SELECT TAG alcançará esse objetivo:

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

Isso enganará seu SELECT, dando-lhe o efeito desejado, transformá-lo em um tamanho SELECT.

2 -

Digamos que, em determinado momento, haja menos do que o máximo de 10 itens que queremos exibir.

Supondo que você esteja obtendo seu SELECT de uma consulta SQL, você pode fazer algo como o seguinte: Depois de saber quantas linhas sua consulta possui, você pode incluir a próxima frase no loop

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

Portanto, se houver menos de 10 linhas em cada loop, ele alocará o número desejado de linhas que será exibido.

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

3 -

Comportamento de buggy, deslocando elementos. Como esse hack substitui um SELECT comum por um 'tamanho', ocupa o espaço necessário para substituir o conteúdo, não como um SELECT comum que se sobrepõe ao conteúdo abaixo. Para impedir que isso aconteça se o SELECT for colocado, digamos em um TD TAG, você pode primeiro colocá-lo em um DIV com o seguinte estilo:

position:absolute;
z-index:1;

Isso permitirá que o SELECT dimensionado se sobreponha ao conteúdo abaixo dele como se fosse um SELECT comum.

9
Joaquin

Adicione o atributo size a <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>
5
ijse

O comportamento depende do navegador e não pode ser controlado pelo autor. Você pode usar o atributo size = 10 no elemento, mas ele também altera o menu para uma caixa de listagem para que 10 opções fiquem visíveis mesmo quando o menu não estiver focado. Para atingir o comportamento descrito, você precisará criar seus próprios controles usando JavaScript e CSS.

Do ponto de vista da usabilidade, geralmente é preferível uma caixa de entrada de texto a um menu quando se escolhe um dia do mês. É mais conveniente digitar um ou dois dígitos do que selecionar em uma lista de aproximadamente 30 itens.

3
Jukka K. Korpela