20 de March de 2019
Uma necessidade que às vezes temos é a de popular um select de forma dinâmica com JavaScript baseado em alguma variável, seja ela um array ou um objeto. Vamos aprender como fazer isso.
Para nosso exemplo vamos criar um arquivo HTML básico contendo apenas um elemento select:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript fills a Select</title>
</head>
<body>
<select id="languages-select">
<option value="" disabled selected>Choose your language</option>
</select>
<script src="main.js"></script>
</body>
</html>
As partes importantes são o atributo id do select que usaremos para referenciar esse elemento e também a chamada do script main.js.
Agora vamos editar o arquivo main.js criando a variável languagesSelect e associar nosso elemento a ela.
const languagesSelect = document.getElementById("languages-select");
No primeiro exemplo vamos considerar que temos nossos dados em um array:
const languagesList = ["Ruby", "JavaScript", "Python", "GoLang"];
Para popular nosso select vamos iterar o array e criar um option para cada item:
languagesList.forEach((language) => {
option = new Option(language, language.toLowerCase());
languagesSelect.options[languagesSelect.options.length] = option;
});
Dentro de cada iteração estamos criando um novo elemento option passando dois argumentos, o primeiro é o texto que será escrito no option e o segundo é o valor do option, que no exemplo eu converti para lowercase.
O resultado do HTML será:
<select id="languages-select"> <option value="" disabled="" selected="">Choose your language</option> <option value="ruby">Ruby</option> <option value="javascript">JavaScript</option> <option value="python">Python</option> <option value="golang">GoLang</option> </select>
Agora vamos considerar que temos nossos dados em um objeto:
const languagesList = {
ruby: "Ruby",
javascript: "JavaScript",
python: "Python",
golang: "GoLang"
};
A única parte que temos que alterar será nosso loop de iteração:
for(language in languagesList) {
option = new Option(languagesList[language], language);
languagesSelect.options[languagesSelect.options.length] = option;
}
Note que nessa versão pegamos o texto do option com base no value do objeto e o valor do option com base no key do objeto.
O resultado será o mesmo HTML gerado anteriormente.
Apenas como dica, caso seja necessário limpar o select removendo todos os options, basta executar:
languagesSelect.options.length = 0;
Dependendo do caso é necessário fazer essa limpeza para não duplicar os itens do select.
Mas lembresse que isso irá remover todos os options, inclusive o inicial "Choose your language" que deverá ser recriado de forma dinâmica, mas isso já fica como lição de casa ;)
Visualizações: 16.551
06 de May de 2014
27 de August de 2013
21 de August de 2013