Skip to content

Instantly share code, notes, and snippets.

@viniceosm

viniceosm/array-options-select.html

Last active August 8, 2018 01:30
Show Gist options
  • Save viniceosm/a84db3865b2a29c1241fdb5c956d4367 to your computer and use it in GitHub Desktop.
Save viniceosm/a84db3865b2a29c1241fdb5c956d4367 to your computer and use it in GitHub Desktop.
Download ZIP
push in array the values of select
Raw
array-options-select.html
<style>
.fl {
float: left;
margin: 2px 10px;
}
#escolhidos {
min-width: 300px;
min-height: 100px;
border: 1px solid black;
padding: 5px;
}
</style>
<html>
<div class="fl">
<select id="exemplo">
<option value="valor1">NOME 1</option>
<option value="valor2">NOME 2</option>
<option value="valor3">NOME 3</option>
<option value="valor4">NOME 4</option>
<option value="valor5">NOME 5</option>
<option value="valor6">NOME 6</option>
<option value="valor7">NOME 7</option>
<option value="valor8">NOME 8</option>
<option value="valor9">NOME 9</option>
<option value="valor10">NOME 10</option>
</select>
</div>
<div class="fl" id="escolhidos"></div>
</html>
<script>
var escolhidos = []
var select = document.querySelector('#exemplo')
select.addEventListener('change', function(e) {
var selecionada = this.options[this.selectedIndex]
// Só dá push se ainda não tem valor no array
if (escolhidos.length == 0 || escolhidos.indexOf(selecionada.value) == -1) {
escolhidos.push(selecionada.value)
document.querySelector('#escolhidos').innerHTML += '<div>' + selecionada.value + '</div>'
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment