1

eu normalmente pesquiso e não perturbo a paciência dos membros aqui, mas dessa vez preciso especificadamente de um exemplo. Veja:

<!DOCTYPE html>
<html>

<body>

    <select id="lista" size="4">
          <option value="A">01</option>
          <option value="B">02</option>
          <option value="C">03</option>
          <option value="D">04</option>
          <option value="E">05</option>
          <option value="F">06</option>
          <option value="G">07</option>
          <option value="H">08</option>
          <option value="I">09</option>
          <option value="J">10</option>
          <option value="k">11</option>
          <option value="L">12</option>
        </select>

    <button onclick="somar()">Carregar Mais</button>
</body>

<script>
    somar = function() {
        var A = document.getElementById('lista');
        var B = A.getElementsByTagName('option');
        var C = B.length;
        B.size = C;
    }
</script>

</html>

Note que estou iniciando o elemento select com tamanho[size] de 4 items amostra, mas, o que pretendo é algo dinâmico - auto ajuste da altura do select conforme a quantidade de option. Por isso que na função do exemplo estou tentando percorrer os ítems pelo método documentgetElementsByTagName('option'). Na minha visão, achei que isso poderia ser a solução para um incremento à definir a propriedade size.

RESUMO - Dar jeito para definir automaticamente a propriedade size do elemento HTML [select] sem interveção humana, deixar a tarefa toda pro "script" ajustar para tamanho real. A idéia é de que não apresente a barra de rolagem vertical

4
  • Pq vc coloca o script fora do body?
    – Sam
    Commented 10/05/2018 às 1:57
  • 1
    @dvd Li em algum lugar pela internet um artigo de um gringo escritor no qual lançou um livro sobre boas práticas web [Front-end] e tals. Nele ele dizia fortemente para que os desenvolvedores atentassem para deixar o(s) script no fim, depois do carregamento de todo conteúdo da página em si. Observe quando acessamos alguns web sites pesados por aí, tende a ter lentidão e vemos barra de status sempre notificando que ainda ha elementos a serem baixados/carregados. Isso é, o desenvolvedor introduziu diversos script no início e no corpo da página. Nos da a sensação de que o Navegador vai travar. Commented 10/05/2018 às 2:02
  • Sim, já li isso tb, mas quando diz "no fim", não quer dizer depois do body, mas no final dele. Pelo foi isso que entendi. Agora vc me deixou na dúvida rss. vou pesquisar...
    – Sam
    Commented 10/05/2018 às 2:05
  • @dvd Então, ha outros meios de se fazer isso. Mas alguns scripts requer que seja no início dependendo da programção pois ele deve enxergar o elemento HTML a ser atingido no DOM. Eu coloquei esse detalhe em um comentário dumas perguntas no qual fiz antigamente por aqui. Tem + detalhes, vou dar uma vasculhada e jaja e aponto algo a +. Commented 10/05/2018 às 2:09

1 Resposta 1

2

Você está redefinindo o atributo size no elemento errado:

B.size = C;

O B são as options (var B = A.getElementsByTagName('option');).

O correto seria o A, que é a variável onde você armazenou o select:

A.size = C;

Exemplo:

somar = function() {
  var A = document.getElementById('lista');
  var B = A.getElementsByTagName('option');
  var C = B.length;
  A.size = C;
}
<select id="lista" size="4">
          <option value="A">01</option>
          <option value="B">02</option>
          <option value="C">03</option>
          <option value="D">04</option>
          <option value="E">05</option>
          <option value="F">06</option>
          <option value="G">07</option>
          <option value="H">08</option>
          <option value="I">09</option>
          <option value="J">10</option>
          <option value="k">11</option>
          <option value="L">12</option>
        </select>
<button onclick="somar()">Carregar Mais</button>

Se quiser que isso seja feito de forma automática, você pode colocar na função do evento DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(){
  var A = document.getElementById('lista');
  var B = A.getElementsByTagName('option');
  var C = B.length;
  A.size = C;
});
<select id="lista" size="4">
   <option value="A">01</option>
   <option value="B">02</option>
   <option value="C">03</option>
   <option value="D">04</option>
   <option value="E">05</option>
   <option value="F">06</option>
   <option value="G">07</option>
   <option value="H">08</option>
   <option value="I">09</option>
   <option value="J">10</option>
   <option value="k">11</option>
   <option value="L">12</option>
</select>

6
  • 1
    Pior que é verdade, vi que havia algo estranho. Até cheguei a pensar que era incompatibilidade entre navegadores, pois tô testando o projeto em 2 distintos. Isso é o que dá ficar horas e horas programando, chega uma hora meu amigo que você cai na sua própria contradição. rsrs Commented 10/05/2018 às 2:13
  • Putz! Trabalho há 20 anos com HTML e nunca ouvi isso, mas que bom se isso for verdade, será uma novidade pra mim. Eu geralmente uso o <head> para carregar libs. Mas, como disse, já li a respeito de colocar no final do <body> para melhorar a performance etc., mas nunca fora dele. Se bem que colocando no <head> eu nunca senti problemas.
    – Sam
    Commented 10/05/2018 às 2:17
  • Adicionei na resposta a ação no carregamento da página, era isso que queria?
    – Sam
    Commented 10/05/2018 às 2:30
  • 1
    Desculpe a demora em lhe dar um feedback estava eu a procurar a resposta que dei sobre minha pergunta onde menciono sobre o que nos estávamos falando - a inclusão do delimitador script depois do fechamento do body. A questão é essa daqui - pt.stackoverflow.com/a/184284/41467 olhe no final de minha resposta + o comentário de um colega logo abaixo. Commented 10/05/2018 às 2:53
  • Legal! Vou dar uma pesquisada e te mando alguma novidade sobre o assunto.
    – Sam
    Commented 10/05/2018 às 2:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .