Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

Selecionar item o select option e carregar automaticamente

Por , em Javascript

Recommended Posts

Biel.    9

Biel.
Postado
boa noite a todos. Direto ao ponto. Pessoal gostaria muito de fazer o seguinte:


ao selecionar o item gol, gostaria que carregasse/exibisse automaticamente

no segundo select o item Volkswagen ou ao selecionar o item Volkswagen gostaria que carregasse/exibisse o item Gol


ou


ao selecionar o item fiat, gostaria que carregasse/exibisse automaticamente

no segundo select o item Ford ou ao selecionar o item Ford gostaria que carregasse/exibisse o item Fiat 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>



<body>


 O carro:<select name="carros" id="aluno" required >

      <option value=""></option>

      <option value="gol">Gol</option>

      <option value="fiat">Fiat</option>

    </select>

é da

    <select name="concessionaria" id="aprendiz" required>

      <option value=""></option>

      <option value="Volkswagen">Volkswagen</option>

      <option value="ford">Ford</option>

    </select>


</body>

</html>





Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Vi esse exemplo na internet, tentei fazer a coisa funcionar, mas não consegui.

<select name="aprendiz_a">
  <option value=""></option>
  <option value="gol">gol</option>
  <option value="fiat">fiat</option>
</select>

<select name="aprendiz_b">
  <option value=""></option>
  <option value="Volkswagen">Volkswagen</option>
  <option value="Ford" >Ford</option>
</select>

<script>
(function(document){
  'use strict';
  var $aprendiz_a = document.querySelector('select[name="aprendiz_a"]'),
      $aprendiz_b = document.querySelector('select[name="aprendiz_b"]');

  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');

value = value === 'gol';
value = value === 'fiat';

    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value) {
        return $options[i].selected = true;
      }
    }
  }

  $aprendiz_a.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_b, this.value);
  });

  $aprendiz_b.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_a, this.value);
  });

}(document));
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Segue versão revisada desse script que eu escrevi já em outro lugar.. criei 2 maps:

Um de ida: carro -> Marca

Um de volta: Marca -> carro

<select name="aprendiz_a">
  <option value=""></option>
  <option value="gol">gol</option>
  <option value="fiesta">fiesta</option>
  <option value="palio">palio</option>
  <option value="f11">f11</option>
</select>
 
<select name="aprendiz_b">
  <option value=""></option>
  <option value="Volkswagen">Volkswagen</option>
  <option value="Ford" >Ford</option>
  <option value="Fiat" >Fiat</option>
  <option value="Ferrari" >Ferrari</option>
</select>
 
<script>
(function(document){
  'use strict';
  var $aprendiz_a = document.querySelector('select[name="aprendiz_a"]'),
      $aprendiz_b = document.querySelector('select[name="aprendiz_b"]');
 
  var mapA = {
    'gol': 'Volkswagen',
    'fiesta': 'Ford',
    'palio': 'Fiat',
    'f11': 'Ferrari'
  };
  var mapB = {
    'Volkswagen': 'gol',
    'Ford': 'fiesta',
    'Fiat': 'palio',
    'Ferrari': 'f11'
  };
 
  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');
 
    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value) {
        return $options[i].selected = true;
      }
    }
  }
 
  $aprendiz_a.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_b, mapA[this.value]);
  });
 
  $aprendiz_b.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_a, mapB[this.value]);
  });
 
}(document));
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito