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

Obtendo o índice da opção selecionada em um elemento HTML select

Quantidade de visualizações: 8469 vezes

Em algumas situações precisamos obter o índice (index) da opção selecionada em um elemento HTML select. Isso pode ser feito por meio da propriedade selectedIndex da coleção options, que representa todas as opções do elemento select. 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 obterOpcaoSelecionada(){
    // vamos obter o elemento select
    var elem = document.getElementById("cidades");    

    // vamos obter o índice da opção selecionada
    var indiceSelecionada = elem.options.selectedIndex;

    // vamos exibir o resultado
    window.alert("Índice da opção selecionada: " + indiceSelecionada);
  }  
</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="obterOpcaoSelecionada()">Obter índice da opção selecionada 
  no elemento select</button>

</body>
</html>

Note que o índice da primeira opção do elemento select é 0.

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)

Como chamar uma função de callback para os elementos individuais de um array usando a função forEach() - Vetores e matrizes em JavaScript

Quantidade de visualizações: 1818 vezes

O método forEach(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) é usado quando queremos acessar os elementos de um vetor individualmente e chamar, para cada um deles, uma função de callback personalizada.

Veja no trecho de código abaixo como usar a função forEach() para obter a soma de todos os elementos maiores ou iguais a 20:

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

<script type="text/javascript">
  function obterSoma(valor, indice, vetor){
    if(valor >= 20){
      soma = soma + valor;
    }
  }  

  var valores = new Array(21, 5, 30, 7, 12, 3);
  // vamos obter a soma dos valores maiores ou iguais a 20
  var soma = 0;
  // percorremos os elementos do vetor individualmente
  valores.forEach(obterSoma);  
  window.alert("A soma é: " + soma);
</script>

Uma função passada para o método forEach() pode conter os seguintes argumentos (nessa mesma ordem):

a) O valor do item;
b) O índice do item (opcional);
c) O vetor a partir do qual o método forEach() está sendo chamado (opcional).

Veja mais um código no qual obtemos a soma dos elementos cujos valores sejam maiores que seu antecessor (com exceção do primeiro elemento):

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

<script type="text/javascript">
  function obterSoma(valor, indice, vetor){
    if(indice == 0){
      soma = soma + valor;
    }
    else{
      if(valor > vetor[indice - 1]){
        soma = soma + valor;  
      } 
    }
  }  

  var valores = new Array(8, 5, 30, 7, 12, 3);
  // vamos dos elementos cujos valores sejam   
  // maiores que seu antecessor (com exceção do
  // primeiro elemento)
  var soma = 0;
  // percorremos os elementos do vetor individualmente
  valores.forEach(obterSoma);  
  window.alert("A soma é: " + soma);
</script>

O resultado será 50, pois obtemos a soma dos valores 8, 30 e 12.

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como substituir uma substring em uma string JavaScript usando a função replace()

Quantidade de visualizações: 480 vezes

Nesta dica mostrarei como podemos substituir parte de uma palavra, frase ou texto em JavaScript usando a função replace() do objeto String. Esta função recebe a substring a ser substituida e a substring que ocupará o seu lugar e retorna uma nova string.

Veja a página HTML para o nosso primeiro exemplo:

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

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos criar uma frase
  var frase = "Gosto de Java, Java e mais Java";  
  document.write("A frase é: " + frase + "<br>");
  
  // e agora vamos substituir a substring na string
  var resultado = frase.replace("Java", "Python");

  // e mostramos o resultado
  document.write("Depois da substituição: " +
    resultado);  
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

A frase é: Gosto de Java, Java e mais Java
Depois da substituição: Gosto de Python, Java e mais Java

Note que apenas a primeira ocorrência da substring "Java" foi substituída por "Python". Para que todas as ocorrências sejam substituídas, temos que usar o sinalizador global. 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 criar uma frase
  var frase = "Gosto de Java, Java e mais Java";  
  document.write("A frase é: " + frase + "<br>");
  
  // e agora vamos substituir a substring na string
  var resultado = frase.replace(/Java/g, "Python");

  // e mostramos o resultado
  document.write("Depois da substituição: " +
    resultado);  
</script>

Agora o resultado será:

A frase é: Gosto de Java, Java e mais Java
Depois da substituição: Gosto de Python, Python e mais Python

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como testar se uma string começa com uma determinada substring em JavaScript usando a função startsWith()

Quantidade de visualizações: 2041 vezes

O método startsWith() da linguagem JavaScript foi adicionado ao objeto String na revisão ECMAScript 2015, ou ES6, também chamado de ECMAScript 6.

Este método é chamado diretamente em uma variável do tipo string e retorna true se a palavra, frase ou texto começar com uma substring específica e false em caso contrário.

Veja um exemplo no qual verificamos se uma frase começa com a palavra "JavaScript":

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

<script type="text/javascript">
  var frase = "JavaScript é uma das melhores linguagens";
  
  if(frase.startsWith("JavaScript")){
    document.writeln("A frase começa com a palavra JavaScript");  
  }
  else{
    document.writeln("A frase não começa com a palavra JavaScript");  
  }
</script>

Ao executarmos este código JavaScript nós teremos o seguinte resultado:

A frase começa com a palavra JavaScript

É importante ter em mente que a função startsWith() diferente letras maiúsculas de letras minúsculas.

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como testar se uma string está vazia em JavaScript - Exercício Resolvido de JavaScript

Como testar se uma variável é do tipo string em JavaScript - Exercício Resolvido de JavaScript

Ler três números inteiros e indicar se eles estão em ordem crescente ou decrescente - Exercícios Resolvidos de JavaScript

Como encontrar o menor valor em um array de inteiros em JavaScript - Exercícios Resolvidos de JavaScript

Como testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

Como multiplicar dois números em JavaScript - O operador de multiplicação da linguagem JavaScript - Exercício Resolvido de JavaScript

Veja mais Dicas e truques de JavaScript

Como inverter a ordem dos caracteres das palavras de uma string em JavaScript usando as funções map(), split(), reverse() e join()

Revertendo a ordem dos elementos de um array não-contíguo

Como retornar a propriedade Infinity em um cálculo

Como formatar datas em JavaScript de acordo com as configurações do computador do usuário usando a função toLocaleDateString()

Como codificar a URL de uma página

Como exibir descrição dos links na barra de status

Como obter confirmação do usuário para determinadas ações em seus códigos JavaScript usando o método confirm() do objeto window

Como chamar uma função de callback para os elementos individuais de um array usando a função forEach() - Vetores e matrizes em JavaScript

Como exibir um número em notação exponencial

Cookies em JavaScript - Como verificar a existência de um cookie usando JavaScript

Dicas e truques de outras linguagens

AutoCAD .NET API C# - Como selecionar uma polilinha no AutoCAD e mostrar as coordenadas de suas vértices usando a AutoCAD .NET C# API

C# - Como obter a quantidade de processadores na máquina atual usando a propriedade ProcessorCount da classe Environment do C#

C - Como arredondar valores de ponto-flutuante usando a função round() da linguagem C

Java - Java Swing para iniciantes - Como definir ou obter o título de uma janela JFrame

C - Como calcular a massa de um corpo dada sua energia cinética e sua velocidade usando a linguagem C

Java - Como remover quebras de linhas de uma string - Como usar o método replaceAll() da classe String para remover quebras de linha de um texto - Revisado

JavaScript - Como adicionar horas a um objeto Date em JavaScript - Datas e horas em JavaScript

Java - Java para iniciantes - Como usar o tipo de dados boolean em seus códigos Java

JavaScript - Validação de formulários em JavaScript - Como validar um formulário contendo usuário e senha em JavaScript

Java - Exercício Resolvido de Java - Escreva um programa Java que efetue a soma dos elementos da diagonal principal de uma matriz

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software 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 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

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

Obtendo o índice da opção selecionada em um elemento HTML select

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

Como chamar uma função de callback para os elementos individuais de um array usando a função forEach() - Vetores e matrizes em JavaScript

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como substituir uma substring em uma string JavaScript usando a função replace()

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como testar se uma string começa com uma determinada substring em JavaScript usando a função startsWith()

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90