How to increase the size of the select dynamically

Asked

Viewed 64 times

0

Speak devs, all right?

Is there a way to increase the size of the select according to the number of children it has dynamically? I want all your children to be displayed without having to handle the scroll bar.

Follow the HTML code:

var vetNum = [];
var select = window.document.getElementById('selNum');

function adicionar()
{
    var txtNum = window.document.getElementById('txtn');
    var num = Number(txtNum.value);
    
    vetNum.push(num);

    var option0 = window.document.getElementById('option0');
    option0.hidden = true;

    var option = document.createElement('option');
    option.text = `Valor ${num} adicionado!`;
    option.value = `option${vetNum.length}`;
    select.appendChild(option);

}
body{
    background: grey;
    font: normal 15pt Arial;
}

header{
    color: white;
    text-align: center;
}

section{
    background: white;
    border-radius: 10px;
    padding: 15px;
    width:500px;
    margin:auto;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.562);
}

footer{
    color:white;
    text-align: center;
    font-style:italic;
}
<!--Que Deus lhe abencoe!-->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analisador de Números</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <header>
        <h1>Analisador de Números</h1>
    </header>

    <section>
        <div>
            Número (entre 1 e 100):
            <input type="number" name="numero" id="txtn">
            <input type="button" value="Adicionar" onclick="adicionar()">
        </div>
        <div>
            <p>
            <select name="selNum" id="selNum" size="6">
                <option value="option0" id="option0">Adicione um número antes</option>
            </select>
            </p>
        </div>
    </section>

    <footer>
        <p>&copy; Lucas Monteiro</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

g

javascript html5 css3 html-select

  • Leaves size=1, and every time you click on the btn add vc tb makes the increment of 1 in size

  • Thanks for the Help!

No answers

Browser other questions tagged javascript html5 css3 html-select

You are not signed in. Login or sign up in order to post.