Você está aqui: JavaScript ::: Elementos de Formulários HTML ::: select Element/Object

Como excluir todas as opções (elementos option) de um elemento HTML select

Quantidade de visualizações: 12232 vezes
Em algumas situações nós precisamos limpar um elemento HTML select, ou seja, excluir todas as opções disponíveis no controle. Para isso podemos usar a propriedade length da coleção options, que representa todas as opções do controle select.

Como o JavaScript nos permite usar a propriedade length para redimensionar uma matriz em tempo de execução, só precisamos ajustar o valor da propriedade length da coleção options para o valor 0 (zero). Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">
  function limparSelect(){
    // vamos obter o elemento select
    var elem = document.getElementById("cidades");    

    // vamos excluir todas as opções
    elem.options.length = 0;    

    // vamos obter a quantidade de opções no select
    var quant = elem.options.length;

    // vamos exibir o resultado
    window.alert("O elemento select contém " + quant + " opções.");
  }  
</script>

</head>
<body>

<form name="form1">
  <select name="cidades" id="cidades">
    <option value="5" selected="selected">Goiânia</option>
    <option value="2">São Paulo</option>
    <option value="7">Cuiabá</option>
  </select>
</form>

<button onclick="limparSelect()">Excluir as opções 
  do elemento select</button>

</body>
</html>

Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6.

Link para compartilhar na Internet ou com seus amigos:

JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes)

Adicionando três elementos ao final de um vetor em JavaScript usando o método push() do objeto Array - Como adicionar elementos ao final de um vetor usando JavaScript - Revisado

Quantidade de visualizações: 7134 vezes
Neste dica mostrarei como usar o método push() do objeto Array da linguagem JavaScript para adicionar três elementos ao final de um vetor. Veja o código completo, incluindo a página HTML que permite executar o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
  <meta charset="utf-8">
  <title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos declarar e instanciar um vetor com 5 elementos
  var valores = new Array(1, 2, 3, 4, 5);
  document.write("Valores no vetor: " + valores + "<br>");
  
  // agora vamos adicionar mais três elementos
  valores.push(6, 7, 8);
  document.write("Valores no vetor: " + valores);
</script>

</body>
</html>

Ao abrir esta página HTML nós teremos o seguinte resultado:

Valores no vetor: 1,2,3,4,5
Valores no vetor: 1,2,3,4,5,6,7,8


JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes)

Como retornar o índice da primeira ocorrência de um elemento em um array do JavaScript usando a função indexOf()

Quantidade de visualizações: 2365 vezes
Em algumas ocasiões nós precisamos obter e retornar o índice da primeira ocorrência de um determinado elemento em um array JavaScript. Para isso podemos usar a funções indexOf(). Se o elemento não puder ser encontrado, o valor -1 é retornado.

Veja um exemplo de seu uso:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
  var valores = new Array(1, 2, 3, 2, 2, 4, 5);
  // vamos obter o índice da primeira ocorrência
  // do elemento com o valor 2
  var indice = valores.indexOf(2);
  window.alert("Elemento encontrado no índice: " 
    + indice);
</script>

Execute o código e veja que o elemento foi encontrado no índice 1, ou seja, na segunda posição do array, já que os índices de vetor e matriz em JavaScript começam a partir de 0.

Experimente pesquisar o valor 50 e verá que o valor retornado é -1, indicando que o elemento não foi encontrado.


JavaScript ::: DOM (Document Object Model) ::: window Object (Objeto window)

Como usar o objeto window em suas aplicações HTML + JavaScript

Quantidade de visualizações: 8738 vezes
O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc).

Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos exibir uma mensagem ao usuário
  window.alert("JavaScript é muito bacana!");
</script>

</body>
</html>

O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas:

a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
  // vamos obter a janela mãe
  var janela_mae = window.parent;
</script>

b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener.

Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida.

O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto.

Dica escrita e testada no Internet Explorer (IE 8) e no Firefox 3.6.


Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 66 usuários muito felizes estudando em nosso site.