0

Tenho um drop-down dinâmico, no qual a quantidade de opções varia. Eu gostaria de saber como fazer para selecionar a última opção automaticamente.

Ex.:

<select name="pagarme_installments" id="pagarme-installments">
    <option value="0">Por favor, selecione o número de parcelas</option>
    <option value="1">1x de 238,80 (sem juros)</option>
    <option value="2">2x de 119,40 (sem juros)</option>
    <option value="3">3x de 79,60 (sem juros)</option>
    <option value="4">4x de 59,70 (sem juros)</option>
    <option value="5">5x de 47,76 (sem juros)</option>
    <option value="6">6x de 39,80 (sem juros)</option>
    <option value="7">7x de 34,11 (sem juros)</option>
    <option value="8">8x de 29,85 (sem juros)</option>
    <option value="9">9x de 26,53 (sem juros)</option>
    <option value="10">10x de 23,88 (sem juros)</option>
    <option value="11">11x de 21,71 (sem juros)</option>
    <option value="12">12x de 19,90 (sem juros)</option>
</select>

A solução em que eu pensei foi encontrar a quantidade máxima de opções existentes no drop-down, depois uma condição na qual, se a opção com o value for igual ao máximo de opções, insira o atributo selected. O problema é que não sei como obter esse valor de cada opção para fazer teste em cada uma delas. Obter o valor máximo eu consegui da seguinte forma:

<script>
  var theSelect = document.getElementById('pagarme-installments');
  var ultimoValor = theSelect.options[theSelect.options.length - 1].value;
</script>

Alguém poderia me dar uma luz? Se houver uma forma de fazer isso em php também vale. É que só encontrei uma forma de fazer isso em js.

Agradeço desde já a atenção.

1
  • 1
    se preferir usar biblioteca jQuery use $("#pagarme-installments option:last").attr("selected", "selected");
    – user60252
    Commented 16/09/2020 às 6:20

1 Resposta 1

2

Olá,

Você pode usar o 'document.querySelectorAll':

document.querySelectorAll('#pagarme-installments option:last-child').item(0).selected =  true

No 'querySelectorAll' usamos a sintaxe de seletores do CSS.

Neste caso, estamos selecionando o último 'option' dentro de '#pagarme-installments'.

Como ele retorna a coleção de elementos, precisamos pegar o primeiro (que é o único) item: item(0)

E setar o atributo 'selected' para true

2
  • Eu estava pensando em uma solução muito mais complicada do que essa. Funcionou perfeitamente! Eu só não entendi muito bem o porquê usar o item(0). Se não fosse incômodo e pudesse me explicar um pouco melhor isso eu ficaria muito grato. Commented 16/09/2020 às 16:01
  • Que bom que deu certo. O uso do 'item(0)' foi para acessar o elemento html do option. Isso pois o 'querySelectorAll' retorna um NodeList, que é uma coleção de objetos. Neste caso só temos um destes objetos, por isso o item 0. Commented 16/09/2020 às 16:49

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 .